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

Question

<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"}]

Answer 1

你在 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">

Answer 2

提供一个思路：
伪代码

    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属性，删选想要的数据

Answer 3

@zuing 楼主 你的问题解决了吗？？？我也有这个需求