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

Question

我正在尝试在单个文件组件中使用多个复选框。而且我需要计算属性，但我的 setter 中有 bool 值 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>

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

更新1.详细案例说明

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

这是 vue 论坛中的相同问题: https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544

Answer 1

Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods. You will have to access them as vm.$data._property.

来自 official documentation .