vue:checkbox 如何绑定数组对象?

<input type="checkbox" id="1" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="2" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="3" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

这个只能绑定value到对象,如何能把id也带上呢?
比如实现同步的checkNanmes的对象格式是这样的[{"user_id":1,"user_name":"Jack"}]

回答:

你在 data 定义好选项

data(){
    return{
       checkboxItems:{
           a:{name:"Jack",id:1},
           b:{name:"John",id:2},
           c:{name:"Mike",id:3}
       }
    }
}

模板里面写成

<input type="checkbox" id="1" :value="checkboxItems.a" v-model="checkedNames">
<input type="checkbox" id="2" :value="checkboxItems.b" v-model="checkedNames">
<input type="checkbox" id="3" :value="checkboxItems.c" v-model="checkedNames">

回答:

提供一个思路:
伪代码

    const list = [
      {id: 1, name: 'name1'},
      {id: 1, name: 'name1'},
    ];
    new Vue({
        methods:{
            handelCheckBoxClick(e){
                const target = e.currentTarget;
                const id = target.getAttribute('id');
                const data = list.filter((item)=> item.id === +id);            
                console.log(data);
            }
        }
    });

给每个checkbox绑定click事件,调用handleCheckBoxClick,根据id属性,删选想要的数据

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注