用于复选框组的 vue 嵌套 for 循环答案

【问题标题】：vue nested for loop for checkbox-groups用于复选框组的 vue 嵌套 for 循环
【发布时间】：2020-08-25 18:16:25
【问题描述】：

我这里有这个 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
            }
          ]
        }
      ],

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

每个复选框组应该只加载非常自己的复选框。我尝试在 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

【问题讨论】：

标签： javascript json vue.js v-for

【解决方案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>

【讨论】：

【解决方案2】：

你应该像这样改变第二个循环：

<b-form-checkbox v-for="right in group.rights" :key="right.id">{{right.name}}</b-form-checkbox>

这会很好..

【讨论】：