Javascript v-for循环中v-model的动态绑定

我正在尝试将v-model动态绑定到对象数组中的对象属性。我不知道怎么做。目标是通过select html标记选择用户，然后从对象数组打印用户权限列表，以便使用复选框更改真/假，并将对对象数组内对象属性的更改保存

模板：

我分享这个JSFIDLE链接，因为我发现很难用语言来解释

我需要将v-model动态绑定到每个用户[someindex].perms.perm属性才能更改它。稍后，我想将此阵列上载到firebase数据库，并进行所有更改。提前谢谢你！我知道这是一个基本的事情，但任何帮助都是非常感谢的！顺便说一句，很抱歉我的英语不好。

对你来说，这就足够了

不过，我建议进行一些重构和重命名，sinde perm.perm显示了您当前的数据结构和命名是多么不直观

我建议使用computed属性返回userPermissions，而不是通过模板中的索引访问数组。 还可以考虑将对象属性重命名为权限，并允许更清晰。

computed: {
  ...
  userPermissions() {
    let index = this.getUserIndex()
    // TODO: handle null
    return this.users[index].permissions
  }
}

在你的模板中

<li v-for="p in userPermissions">
  <span>{{ p.status }}</span>
  <input type="checkbox" v-model="p.isAllowed">
</li>

这应该行得通

新Vue{ el:应用程序， 数据：{ 用户：[{ 姓名：“Alex”， 烫发：[{ 状态：“活动”， 烫发：假 }, { 状态：“发票”， 烫发：假 } ] }, { 姓名：'约翰'， 烫发：[{ 状态：“活动”， 烫发：假 }, { 状态：“发票”， 烫发：假 } ] }, { 姓名：'海伦'， 烫发：[{ 状态：“活动”， 烫发：假 }, { 状态：“发票”， 烫发：假 } ] }, ], 选择用户： }, 计算：{ getUserIndex{ 让username=this.selectedUser； 让index=this.users.findIndexel=>el.name==username； 如果索引==-1{ 返回空 }否则{ 回报指数 } } }, } 选择用户 {{user.name} 用户索引：{{getUserIndex}}

{{item.status}

computed: {
  ...
  userPermissions() {
    let index = this.getUserIndex()
    // TODO: handle null
    return this.users[index].permissions
  }
}

<li v-for="p in userPermissions">
  <span>{{ p.status }}</span>
  <input type="checkbox" v-model="p.isAllowed">
</li>