javascript - 用于复选框组的 vue 嵌套 for 循环

Question

我在这里有这个 obj：

      rightGroups: [
        {
          name: "Rechte für die Administration",
          id: 1,
          rights: [
            {
              caption: 'Rechte verwalten',
              name: 'reports',
              right: false,
              id: 1
            },
            {
              caption: 'Rechte X',
              name: 'admin.rightX',
              right: false,
              id: 2
            },
            {
              caption: 'Rechte Y',
              name: 'admin.rightY',
              right: false,
              id: 3
            },
            {
              caption: 'Rechte Z',
              name: 'admin.rightZ',
              right: false,
              id: 4
            }
          ]
        },
        {
          name: "Rechte für die Benutzerverwaltung",
          id: 2,
          rights: [
            {
              caption: 'Benutzer verwalten',
              name: 'user.recht',
              right: false,
              id: 1
            },
            {
              caption: 'Recht X',
              name: 'user.rightX',
              right: false,
              id: 2
            },
            {
              caption: 'Recht Y',
              name: 'user.rightY',
              right: false,
              id: 3
            },
            {
              caption: 'Recht Z',
              name: 'user.rightZ',
              right: false,
              id: 4
            }
          ]
        }
      ],

它应该只显示动态加载的复选框组，如下所示： 复选框组

每个复选框组应该只加载非常自己的复选框。我尝试在 bootstrap-vue 中使用 v-for 来完成这一点，如下所示：

    <b-row class="mt-5">
      <b-col
        v-for="group in rightGroups"
        :key="group.id"
        md="6"
      >
        <b-card
          border-variant="dark"
        >
          <template v-slot:header>
            <b-form-checkbox>
              <strong>{{ group.name }}</strong>
            </b-form-checkbox>
          </template>

          <b-form-checkbox
            v-for="right in group"
            :key="right.id"
          >

          </b-form-checkbox>
        </b-card>
      </b-col>

    </b-row>

我只希望将权限加载到非常自己的组中。我怎样才能做到这一点？

我创建了一个代码框： https ://codesandbox.io/s/thirsty-snowflake-2q4l0?file=/src/components/Rights.vue

标签： javascriptjsonvue.jsv-for

Answer 1

这就是你要找的吗？只需在您的 CSB Rights.vue 文件中替换以下代码即可查看更改。

<template>
  <div id="authorization">
    <b-row class="m-5">
      <b-col v-for="group in rightGroups" :key="group.id" md="6" align="start">
        <b-card border-variant="dark">
          <template v-slot:header>
            <b-form-checkbox>
              <strong>{{ group.name }}</strong>
            </b-form-checkbox>
          </template>

          <b-form-checkbox v-for="rights in group.rights" 
          :key="rights.id" 
          v-model="rights.right">{{rights.caption}}</b-form-checkbox>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rightGroups: [
        {
          name: "Rechte für die Administration",
          id: 1,
          rights: [
            {
              caption: "Rechte verwalten",
              name: "reports",
              right: true,
              id: 1
            },
            {
              caption: "Rechte X",
              name: "admin.rightX",
              right: false,
              id: 2
            },
            {
              caption: "Rechte Y",
              name: "admin.rightY",
              right: false,
              id: 3
            },
            {
              caption: "Rechte Z",
              name: "admin.rightZ",
              right: false,
              id: 4
            }
          ]
        },
        {
          name: "Rechte für die Benutzerverwaltung",
          id: 2,
          rights: [
            {
              caption: "Benutzer verwalten",
              name: "user.recht",
              right: false,
              id: 1
            },
            {
              caption: "Recht X",
              name: "user.rightX",
              right: false,
              id: 2
            },
            {
              caption: "Recht Y",
              name: "user.rightY",
              right: false,
              id: 3
            },
            {
              caption: "Recht Z",
              name: "user.rightZ",
              right: false,
              id: 4
            }
          ]
        }
      ]
    };
  }
};
</script>