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>

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

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

在Vue实例上开始_或$不在其上代理的属性,因为它们可能与Vue的内部属性和API方法冲突.您将不得不访问它们vm.$data._property.

从官方文档.