如何解决如何对取值进行v检验
我正在尝试创建一个复选框,仅选择一个。
<div id="app">
<div v-for="(question,index) in questions">
<input type="checkbox" value="question.value" v-model="additional_grouped" @change="uniqueCheck"> {{question.title}}
</div>
{{ result }}
</div>
我的JS如下所示:
new Vue({
el: '#app',data() {
return {
additional: [],additional_grouped: [],questions: [
{
title: 'A',value: 0
},{
title: 'B',value: 1
},{
title: 'C',value: 2
}
]
}
},computed: {
result: function(){
return this.additional.concat(this.additional_grouped);
}
},methods: {
uniqueCheck(e){
console.log(e)
this.additional_grouped = [];
if (e.target.checked) {
this.additional_grouped.push(e.target.value);
}
}
}
});
这是旧结果。
我正在尝试获得这样的结果。
我不能通过v-for方法来做到这一点,但我想这样做。因为我有很多数据,如何在v-for中检查值?
这是我的笔:enter link description here
解决方法
使用:value="question.value"
而不是value="question.value"
new Vue({
el: '#app',data() {
return {
additional: [],additional_grouped: [],questions: [
{
title: 'A',value: 0
},{
title: 'B',value: 1
},{
title: 'C',value: 2
}
]
}
},computed: {
result: function(){
return this.additional.concat(this.additional_grouped);
}
},methods: {
uniqueCheck(e){
this.additional_grouped = [];
if (e.target.checked) {
this.additional_grouped.push(e.target.value);
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(question,index) in questions">
<input type="checkbox" :value="question.value" v-model="additional_grouped" @change="uniqueCheck"> {{question.title}}
</div>
{{ result }}
</div>
,
您缺少值绑定(:value
),这是固定的示例:
new Vue({
el: '#app',index) in questions">
<input type="checkbox" :value="question.value" v-model="additional_grouped" @change="uniqueCheck"> {{question.title}}
</div>
{{ result }}
</div>
,
如果要获取复选框值的数组,则应执行此操作
<div id="app">
<div v-for="(question,index) in questions" :key="index">
<input type="checkbox" v-model="question.checked"> {{question.title}}
</div>
{{ result }}
</div>
和
new Vue({
el: '#app',data() {
return {
questions: [
{
title: 'A',computed: {
result: function(){
return this.questions.filter(q => q.checked).map(q => q.value)
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。