vuejs v-model，多个复选框和计算属性

Question

我正在尝试在单个文件组件中使用多个复选框。而且我需要计算属性，但我的设置器中有布尔值 newVal 而不是数组。这是我的代码：

var demo = new Vue({
    el: '#demo',
    data: {
        _checkedNames: [] 
    },
    computed: {
      checkedNames: {
        get: function () {
          return this._checkedNames;
        },
        set: function (newVal) {
          console.log(newVal); //with computed we have true/false value instead of array
          this._checkedNames = newVal;
        }
      }
    }
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

因此，您将在控制台中看到布尔值。

更新1.详细案例说明

我正在使用模型的遗留代码，它作为参数传递给 vue 组件。而且我需要将组件标记绑定到模型的属性（上面代码中的_checkedNames 模拟了这个模型属性）。此属性通过 getter/setter（有时只是 getter）声明。我想在v-model 构造中使用这样的属性。这个案子对我不起作用。我猜 vuejs 无法正确包装它。我正在寻找一个考虑到上述限制的解决方案（或解决方法）。

vue 论坛里有同样的问题：https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544

Answer 1

以_ 或$ 开头的属性将不会在 Vue 实例上代理，因为它们可能与 Vue 的内部属性和 API 方法发生冲突。您必须以vm.$data._property 的身份访问它们。

来自official documentation。

Answer 2

这是工作版本：

var demo = new Vue({
  el: '#demo',
  data: {
    checkedNames: []
  }
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

如果您想使用 computed 属性，可以这样使用：

var demo = new Vue({
  el: '#demo',
  data: {
    checkedNames: []
  },
  computed : {
    checkedComputed () {
      return this.checkedNames
    }
  }
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked Names :</span>
  <span>{{ checkedComputed }}</span>
</div>