使用复选框的表格网格中的 Vue JS 角色和权限答案

【问题标题】：Vue JS Roles & Permission in a table grid using checkboxes使用复选框的表格网格中的 Vue JS 角色和权限
【发布时间】：2021-03-23 11:09:37
【问题描述】：

我想使用 vue 中的复选框检查角色的权限。例如，如果管理员可以创建、查看、删除复选框，则会选中复选框，否则不会选中复选框。到目前为止，我已经创建了具有适当角色和权限的表，每个角色都在下面，但不知道如何根据角色中的权限检查复选框。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data() {
    return {
    
    
permissions: [
    {
        id: 1,
        name: "view posts"
    },
    {
        id: 2,
        name: "create posts"
    },
    {
        id: 3,
        "name": "edit posts"
    },
    {
        id: 4,
        name: "delete posts"
    }
],
roles: [
    {
        id: 1,
        name: "admin",
        description: "Full admin access to all the areas of the blog.",
        permissions: [
            {
                id: 1,
                name: "view posts",  
            },
            {
                id: 2,
                name: "create posts",
            },
            {
                id: 3,
                name: "edit posts",
            },
            {
                id: 4,
                name: "delete posts",
            }
        ]
    },
    {
        id: 2,
        name: "executive",
        description: "Limited access to critical areas of the blog",
        permissions: [
            {
                id: 1,
                name: "view posts",   
            },
            {
                id: 2,
                name: "create posts",
            }
        ]
    },
    {
        id: 3,
        name: "user",
        description: "Basic view access to some areas of the blog",
        permissions: [
            {
                id: 1,
                name: "view posts",
            }
        ]
    }
]

     
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
        
        
         <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
        
<div id="app">

<template>

<div>

<div id='permissionsTable'>
                <v-row class='headerRow'>
                  <v-col cols='3'>Permissions</v-col>
                  <v-col v-for="role in roles" v-bind:key="role.id">{{role.name}}</v-col>
                </v-row>
                <v-row v-for="permission in permissions" v-bind:key="permission.id" class="bodyRow">
                  <v-col cols='3'>{{permission.name}}</v-col>
                  <v-col v-for="(role, index) in roles" v-bind:key="role.name">

                    {{roles[index].permissions}}

                      <v-checkbox :input-value="roles[index].permissions.includes(permission.id)" @change="onItemClick($event,role.name,permission.id)">
                </v-checkbox>
               
                  </v-col>
                </v-row>
              </div>

</div>

</template>

 
</div>

【问题讨论】：

标签： vue.js permissions vuetify.js roles

【解决方案1】：

v-checkbox 有一个 v-model 属性，您可以使用它来传递布尔值并相应地选择或取消选择它！尝试在 roles 数组中添加该布尔值并在 v-for 中使用它。您也可以在v-model 上的v-model 上检查您的状况，例如:v-model="role.permissions.includes(1)"，但您可以使用最适合您的情况。

【讨论】：

感谢您的建议，我知道有一个可以使用的 v-model，我只是不明白为什么角色内部应该有一个布尔值。没有意义
上面的答案对于我认为可以非常简单地完成的事情来说有点太多了，你想检查一些复选框，所以你可以添加那个布尔值并将其设置为@987654328 @ 并使用 true 或 false 值来检查和取消选中每个项目。如果需要，您也可以通过将逻辑（如 :v-model="role.permissions.includes(1)"）直接放在 v-model 中来不使用布尔值。

【解决方案2】：

如果有帮助，请告诉我。

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  methods: {
    onItemClick(e, role, permissionId) {
      const index = this.roles.findIndex((r) => r.name === role);
      const found=this.roles[index].permissions.find(perm=> perm.id === permissionId)
      if (
        found
      ) {
        this.roles[index].permissions.splice(
          this.roles[index].permissions.findIndex(perm=>perm.id===permissionId),
          1
        );
      } else {
        this.roles[index].permissions.push(this._permissions[permissionId]);
      }
    }
  },
  computed: {
    _permissions() {
      return this.permissions.reduce((acc, curr) => {
        const id = curr.id;
        acc[id] = curr;
        return acc;
      }, {});
    },
    _roles() {
      return this.roles.reduce((acc, curr) => {
        const id = curr.id;
        acc[id] = curr;
        return acc;
      }, {});
    }
  },
  data() {
    return {
      permissions: [
        {
          id: 1,
          name: "view posts"
        },
        {
          id: 2,
          name: "create posts"
        },
        {
          id: 3,
          name: "edit posts"
        },
        {
          id: 4,
          name: "delete posts"
        }
      ],
      roles: [
        {
          id: 1,
          name: "admin",
          description: "Full admin access to all the areas of the blog.",
          permissions: [
            {
              id: 1,
              name: "view posts"
            },
            {
              id: 2,
              name: "create posts"
            },
            {
              id: 3,
              name: "edit posts"
            },
            {
              id: 4,
              name: "delete posts"
            }
          ]
        },
        {
          id: 2,
          name: "executive",
          description: "Limited access to critical areas of the blog",
          permissions: [
            {
              id: 1,
              name: "view posts"
            },
            {
              id: 2,
              name: "create posts"
            }
          ]
        },
        {
          id: 3,
          name: "user",
          description: "Basic view access to some areas of the blog",
          permissions: [
            {
              id: 1,
              name: "view posts"
            }
          ]
        }
      ]
    };
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
        
        
         <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>

<div id="app">

  <template>

    <div>
      <div id='permissionsTable'>
        <v-row class='headerRow'>
          <v-col cols='3'>Permissions</v-col>
          <v-col v-for="role in roles" v-bind:key="role.id">{{role.name}}</v-col>
        </v-row>
        <v-row v-for="permission in permissions" v-bind:key="permission.id" class="bodyRow">
          <v-col cols='3'>{{permission.name}}</v-col>
          <v-col v-for="(role, index) in roles" v-bind:key="role.name">

            {{roles[index].permissions}}

            <v-checkbox :input-value="_roles[role.id].permissions.find(perm=>perm.id===permission.id)" @change="onItemClick($event,role.name,permission.id)">
            </v-checkbox>

          </v-col>
        </v-row>
      </div>

    </div>

  </template>

</div>

【讨论】：

感谢您在这里的输入，我不希望禁用框，而是检查每个复选框，目标是为角色分配新权限或删除权限只需选中或取消选中复选框即可。谢谢
代码已更新。如果这就是您要找的，请告诉我。
修改了数组，现在没有任何效果，您能再更新一下代码吗？谢谢！！！
代码已更新。如果您发现任何问题，请检查并告诉我。