vue.js - Vue2多v-for场景

Question

roleList 对象将具有以下数组：

{
  groupName: Client Login,
  roleID: 1,
  roleName: View Own Profile,
  roleChecked: false
},
{
  groupName: Client Login,
  roleID: 1,
  roleName: View Own Invoices,
  roleChecked: false
},
{
  groupName: Client Management,
  roleID: 1,
  roleName: View Clients,
  roleChecked: true
},
{
  groupName: Client Management,
  roleID: 1,
  roleName: Create Client,
  roleChecked: false
}

我希望 groupName 成为该组名下具有角色列表的部分的标题。groupName 和 roleName 是复选框，因此如果单击 groupName，所有相应的角色也会被选中。如果其中一个角色未选中，则 groupName 也将取消选中。roleChecked 只是一个默认复选框（单击或未单击）。

所以这个例子是：

[ ] 客户登录

[ ] 查看自己的个人资料

[ ] 查看自己的发票

我正在尝试研究如何使用 Vue2 构建 v-for 和复选框的行为。我稍后可能会添加角色和组，因此需要它是动态的。

标签： vue.jsvuejs2v-for