Vue 计算设置器不能使用复选框？答案

【问题标题】：Vue computed setter not working with checkboxes?Vue 计算设置器不能使用复选框？
【发布时间】：2017-12-10 13:24:49
【问题描述】：

我有一个计算的 setter：

rating: {
    get() {
        return this.$store.state.rating;
    },

    set(value) {
        console.log(value);

        this.$store.commit('updateFilter', {
            name: this.name,
            value
        });
    }
}

这与我的评分相关联，如下所示：

<label>
    <input type="checkbox" :value="Number(value)" v-model="rating">
    {{ index }}
</label>

我希望计算的 setter 记录一个数组，因为当我使用观察者来观察评级模型的变化时，我得到了一个数组。

除了每当我使用像上面这样的计算设置器时，它只会在选中复选框时输出 true 或在全部取消选中时输出 false。

这是怎么回事，我应该像观察者一样获取一个数组吗？

【问题讨论】：

this.$store.state.rating 是一个数组吗？

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

v-model 具有某种"magical" 行为，尤其是在applied to checkboxes 时。绑定到数组时，复选框将根据其选中状态在数组中添加或删除值。

在您的示例中不清楚value 在Number(value) 中是什么。它应该是您希望在选中该框时包含在数组中的值。

以上面链接的 Vue 文档中的示例为例，我已对其进行了修改以使用计算，并且它可以按照您的预期工作，set 获取数组的新值。

new Vue({
  el: '#app',
  data: {
    checkedNames: []
  },
  computed: {
    proxyCheckedNames: {
      get() {
        return this.checkedNames;
      },
      set(newValue) {
        this.checkedNames = newValue;
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <input type="checkbox" id="jack" value="Jack" v-model="proxyCheckedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="proxyCheckedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="proxyCheckedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

【讨论】：