Bootstrap 复选框未更新计算属性
我正在尝试创建一个选择所有复选框的复选框。
我有一系列对象。每个对象内部都有一个允许的值。其中说明复选框是否处于活动状态。该数组来自一个计算属性,该属性从我商店中的 getter 获取数据。
我创建了一个复选框,当它被选中时,它会改变我的状态。状态正在更新,但我的模板没有呈现正确的值。
我可以在 Vue 控制台中看到状态正在更新,并且在计算属性的 console.log() 中看到。
我希望计算的属性显示为正确的数据。我尝试将所有内容移至方法并调用该方法,但它仍然没有显示。当我理解 Vue 文档时。如果值更新,计算的 props 也应该更新。
我的模板怎么没有更新?我该如何更新它?
模板
<b-form-checkbox
v-model="allSelected"
:indeterminate="indeterminate"
@change="toggleAll"
>Select All
</b-form-checkbox>
<b-row>
<b-col v-for="cat in categories" :key="cat.id" sm="12" md="6" lg="4">
<b-form-checkbox
:value="cat"
v-model="cat.allowed"
/>
<span>{{ cat.name }}</span>
</b-col>
</b-row>
computed: {
...mapGetters("categories", ["customerCategories"]),
categories() {
return this.customerCategories;
},
},
methods: {
...mapActions("categories", ["updateToggle"]),
toggleAll() {
this.updateToggle(this.allSelected);
},
}
....商店
updateToggle({ commit }, data) {
commit("isCategoriesActive", data);
}
isCategoriesActive: (state, value) =>
(state.list = state.list.map(cat => {
cat.allowed = value
return cat
})),
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用
v-Model
参考计算
getter/setter: Playground您需要更改的唯一内容是:
allsected
中Check out this solution, with
v-model
reference to acomputed
getter/setter: PlaygroundThe only thing from my example you need to change is:
allSelected