Javascript Vue:如何从对象数组绑定选中值

Javascript Vue:如何从对象数组绑定选中值,javascript,vue.js,checkbox,binding,Javascript,Vue.js,Checkbox,Binding,在过去的10个小时里,我一直在努力解决一个看似简单的问题,我希望有人能帮助我 情况: data: { user: { email: 'test@test.com', has_items: [ { "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel"

在过去的10个小时里,我一直在努力解决一个看似简单的问题,我希望有人能帮助我

情况:

data: {
    user: {
      email: 'test@test.com',
      has_items: [ 
      { "id": 19, "userId": 63, "projectId": 1, "project": { "id": 1, "titel": "Project1" } }, 
      { "id": 20, "userId": 63, "projectId": 2, "project": { "id": 2, "titel": "Project2" } } 
      ]
    },
    items: [
      { "label": "Project1", "titel": "Project1", "projectId": 1 },
      { "label": "Project2", "titel": "Project2", "projectId": 2 },
      { "label": "Project3", "titel": "Project3", "projectId": 3 }
    ]
  }
但是,我似乎无法将
has_items
projectId
绑定到复选框选中状态。我很有信心,这是其中的一种情况,胡闹会让事情变得更糟,而一个简单的解决方案却被忽视了

我添加了一个小提琴示例:

希望有人能指出我犯的错误,并使这项工作:)


谢谢

因为
user.has\u items
中的元素与
items
中的元素相比有一些额外的格式,所以我认为
v-model
在这里不是一个真正的选项。在选中复选框和将
项目
推送到用户数组之间,您需要空间将
项目
转换为
项目

你可以通过交易v型来获得更多的手动选项:事件。在这里的示例中,我使用
change
事件触发一个方法,根据复选框是选中还是取消选中来添加或删除项目

我用另一种方法设置复选框的初始值。此方法检查复选框的关联项目是否在用户的项数组中

var demo=新的Vue({
el:“#应用程序”,
数据:{
用户:{
电邮:'test@test.com',
有以下项目:[
{“id”:19,“userId”:63,“projectd”:1,“project”:{“id”:1,“titel”:“Project1”},
{“id”:20,“userId”:63,“projectd”:2,“project”:{“id”:2,“titel”:“Project2”}
]
},
项目:[
{“label”:“Project1”,“titel”:“Project1”,“projectd”:1},
{“label”:“Project2”,“titel”:“Project2”,“projectd”:2},
{“label”:“Project3”,“titel”:“Project3”,“projectd”:3}
]
},
方法:{
userHasItem(项目){
返回this.user.has\u items.find(e=>e.projectId==project.projectId)!=未定义;
},
更新基础项目(选中,项目){
如果(选中){
//向用户添加项目。已添加\u个项目
//[项目和has_项目之间的翻译在此处进行]
此.user.has_items.push(项目);
}
否则{
//从用户中删除项目。基于ID有\u个项目
this.user.has_items.splice(this.user.has_items.findIndex(e=>e.projectd==project.projectd),1);
}
},
},
})

{{project.titel}
用户项目

{{user.has_items}
您能否解释一下您想要的结果是什么,或者将
项目ID
绑定到复选框是什么意思?是的,当然,对于每个
项目
,都会根据
用户创建一个复选框。has_items
值。也就是说,如果
user.has\u items
包含
projectd:1
,则应检查带有
projectd:1
项。如果没有
user.has_items
值,则应在检查复选框why
user.has_items
对象
{“id”:19,“userId”:63,“projectd”:1,“project”:{“id”:1,“titel”:“Project1”}
的格式与项
{“label”:“Project1”,“titel”:“Project1”,“projectd”:1}
,,这是要求的一部分吗?或者它们一定是一样的?