Bootstrap 复选框未在计算属性上更新

Question

我正在尝试创建一个选中所有复选框的复选框。

我有一组对象。每个对象内部都有一个允许值。其中说明复选框是否处于活动状态。该数组来自计算属性，该属性从我商店中的 getter 获取数据。

我创建了一个复选框，当它被选中时它会改变我的状态。状态正在更新，但我的模板未呈现正确的值。

我可以在我的 Vue 控制台中看到状态正在更新，并且在计算属性的 console.log() 中。

我希望显示计算属性以更正数据。我已经尝试将所有内容移动到一个方法并调用该方法，但它仍然没有显示。当我了解 Vue 文档时。如果值更新，计算道具应该更新。

我的模板没有更新怎么办？我该如何更新它？

模板

<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
   })),

Answer 1

查看此解决方案，其中 v-model 引用 computed getter/setter：Playground

我的示例中您唯一需要更改的是：

猫数组的存储位置
getter/setter 在计算 allSelected

<script>
export default({
  data () {
    return {
      cats: [
        { name: "one", allowed: false},
        { name: "two", allowed: false},
        { name: "three", allowed: false},
        { name: "four", allowed: false},
        { name: "five", allowed: false}
      ]
    }
  },
  computed: {
    allSelected: {
      get () {
        return this.cats.every(cat => cat.allowed)
      },
      set (value) {
        this.cats.map(cat => cat.allowed = value)
      }
    }
  }
})
</script>

<template>
allSelected: <input type="checkbox" v-model="allSelected" />
  <hr />
  <template v-for="cat in cats" :key="JSON.stringify(cat)">
  <div>
    {{cat.name}} : <input type="checkbox" v-model="cat.allowed" />
    </div>
  </template>
</template>

Bootstrap 复选框未在计算属性上更新

Bootstrap check box not updating on Computed Properties

javascript

vue.js

bootstrap-vue

computed-properties