如何在动态项目数组vueJs Vuetify中收集复选框数组

Question

我有一个角色权限实现，其中我有resource ，它是一个数组，其中包含用户可以访问的项目。 我再次checks了哪些是所述资源的权限。

我想动态分配一个角色，该角色将拥有这些资源以及用户选择的权限。

我尝试了以下实现，但提交的结果没有提交选择的权限数组（检查），它只提交复选框中的最后一项。

我在这里想念什么

模板是

 <template v-slot:activator="{ on }">
  <v-btn
    class="mx-2"
    data-toggle="tooltip"
    data-placement="left"
    title="Edit Permissions"
    fab
    dark
    small
    color="#666"
    v-on="on"
    @click="getItem()"
  >
    <v-icon dark>mdi-access-point</v-icon>
  </v-btn>
</template>
<v-form v-model="valid" @submit.prevent="onSubmit">
      <v-container>

        <v-row>
          <v-col cols="12" sm="12" md="12" class="alternate-card">
            <h4 class="text-muted text-center">
              Role : {{ payload.role }}
            </h4>
          </v-col>
          <blockquote class="col-md-12">
            <h4 class=" text-center">Permissions</h4>
          </blockquote>
          <hr />
          <v-col
            cols="12"
            sm="12"
            md="12"
            v-for="(perm, indexe) in result"
            :key="indexe"
          >
            <h5 class="text-center text-muted">{{ indexe }}</h5>

            <v-row class="alternate-card">
              <v-col
                cols="12"
                sm="3"
                md="3"
                v-for="(item, index) in checks"
                :key="index"
              >
              {{item}}
                <span>
                  <v-checkbox
                    v-model="result[indexe]"
                    :label="item"
                    :value="item"
                  ></v-checkbox>
                </span>
              </v-col>
            </v-row>
          </v-col>
        </v-row>

        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false"
            >Close</v-btn
          >
          <v-btn type="submit" :disabled="!valid" color="blue darken-1" text
            >Save</v-btn
          >
        </v-card-actions>
      </v-container>
    </v-form>

脚本是

export default {
  props: ["form"],
  data() {
    return {
      valid: false,
      load: false,
      payload: {},
      result: {},
      checks: {
        create: "create",
        edit: "edit",
        delete: "delete",
        show: "show",
      },
    };
  },

  methods: {
    ...mapActions(["editRole"]),
    onSubmit() {
      this.load = true;
       console.log(this.result)
      this.payload.permission = {}
      this.payload.permission = this.result
    //   console.log(this.payload)
      if (this.editRole(this.payload)) {
        setTimeout(() => (this.load = false), 1000);
        setTimeout(() => (this.dialog = false), 1300);
      }
    },
    getItem() {
      this.payload = {
      id: 22462662,
      role: "Admin",
      permission : 
          {
            package : ['create', 'edit', 'delete', 'show'],
            category : ['create', 'edit', 'delete', 'show'],
            product : ['create', 'edit', 'delete', 'show'], 
         },
    },
      let resource =  ['package', 'users',  'category', 'product', 'assets', 'readers']
      let keys = Object.keys(this.payload.permission);
      for (var i = 0; i < resource.length; i++) {
        for (var j = 0; j < Object.keys(this.payload.permission).length; j++) {
    //search through the obj and return corresponding items and assign to result Obj
          if (keys[j] === resource[i]) {
            this.result[resource[i]] = this.payload.permission[keys[j]];
          }
        }
      }
      //now remove all keys that are in obj from resource
      let included = resource.filter(function(item) {
        return !keys.includes(item);
      });
      //now push these into result
      for (var h = 0; h < included.length; h++) {
        this.result[included[h]] = [];
      }
    },
  },
};

所以最终result Obj 看起来像

{ "package": [ "create", "edit", "delete", "show" ], "category": [ "create", "edit", "delete", "show" ], "product": [ "create", "edit", "delete", "show" ], "assets": [], "users": [], "readers": [] } 

我正在使用 Vuex，但对于这个问题，我已经删除了大多数对它的引用。

Answer 1

谢谢@IVOGELOV 我想通了，虽然它不是那么整洁，但现在必须做，我改变了<v-checkbox v-model="result[indexe][index]":label="item":value="item" ></v-checkbox>和

 `checks: {  0: "create", 1: "edit",  2: "delete",  "show",},`

就这样，我得到了一系列复选框，我不知道它为什么起作用，但它确实起作用了。 我们将改进我的结构，但现在就可以了。