我正在尝试将所有选定的复选框项目存储在属性中。
这是我的对象模型之一中的“通用”属性,它包含所有不同类型的数据。
这个属性被初始化为 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/
我必须对“非工作示例”进行哪些调整才能实现“工作示例”的功能?我'
最佳答案
您可以使用事件来触发方法,而不是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>
关于javascript - 如何在 VueJS 中将复选框值绑定(bind)到 null 对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46002418/