javascript - 如何在 VueJS 中将复选框值绑定(bind)到 null 对象？

Question

我正在尝试将所有选定的复选框项目存储在属性中。

这是我的对象模型之一中的“通用”属性，它包含所有不同类型的数据。

这个属性被初始化为 null，所以 Vue 不明白它应该是一个数组。因此它只将一个复选框值绑定(bind)到该属性。

当我使用 [] 初始化此属性并将其声明为数组时，它按预期工作。然而，这些对象以 JSON 的形式从外部传递，因此不能选择将它们初始化为数组。

var working = new Vue({
    el: "#a",
    data: {
        options: ["Apple", "Banana", "Citrus"],
        answers: [], //<- I'm unable to do this in my scenario
    }
});

var notWorking = new Vue({
    el: "#b",
    data: {
        options: ["Apple", "Banana", "Citrus"],
        answers: null 
    }
});

这是我制作的一个快速 JSfiddle，展示了我的意思。

https://jsfiddle.net/ojvfy39p/12/

我必须对“非工作示例”进行哪些调整才能实现“工作示例”的功能？我'

Answer 1

您可以使用事件来触发方法，而不是v-model。

var working = new Vue({
    el: "#a",
    data: {
    	options: ["Apple", "Banana", "Citrus"],
    	answers: [], //<- I'm unable to do this in my scenario
    }
});

var notWorking = new Vue({
    el: "#b",
    data: {
    	options: ["Apple", "Banana", "Citrus"],
    	answers: null 
    },
    methods: {
    	updateAnswers(val) {
        if(this.answers === null) {
          this.answers = [val];
        } else if(this.answers.indexOf(val) > -1) {
          this.answers.splice(this.answers.indexOf(val), 1);
        } else {
          this.answers = [...this.answers, val];
        }
      },
    }
});

console.clear();

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

Working example. "Answers" initialized as array.
<form id="a">
<div v-for="(option,i) in options">
  <input type="checkbox" :value="option" name="option" v-model="answers"/> {{ option }}
</div>
  <br>
  Selected items: {{ answers }}
</form>
<br>

Not working example, "Answers" initialized as null
<form id="b">
<div v-for="option in options">
  <input type="checkbox" :value="option" name="option" @click="updateAnswers(option)" /> {{ option }}
</div>
  <br>
  Selected items: {{ answers }}
</form>