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

Question

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

这是工作版本：

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>

Answer 2

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.