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

以_或$开头的属性不会在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>

如果您想使用计算属性，可以这样使用它：

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>

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

更新1.详细案例说明

2 个答案: