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

【问题标题】：How to collect array of checkboxes in a dynamic array of items vueJs Vuetify如何在动态项目数组vueJs Vuetify中收集复选框数组
【发布时间】：2020-06-19 11:07:26
【问题描述】：

我有一个角色权限实现，其中我有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，但是对于这个问题，我已经删除了对它的大部分引用。

【问题讨论】：

您确定 result[indexe] 始终是 Array 的一个实例吗？如果它为 null 或未定义 - 这可能会破坏您的假设。
result 在这种情况下是一个对象，我因为我用其中包含数组的对象填充它，所以它总是会有一些东西，你可以看到我的问题的最后一部分显示结果会是什么样子。
问题在于result 对象中的键（通过indexe 变量引用的键）可能是其他东西而不是数组。如果你需要一个权限数组，你需要所有的复选框都指向同一个数组。
我该怎么做，因为在其他意义上indexe 是resource 数组中的项目['package', 'users', 'category', 'product', 'assets', 'readers']。所以循环通过第一个v-for 将给indexe 作为package 用于四个复选框。我说四个是因为嵌套的 v-for 循环内只有四个项目。我知道我错过了一些东西，因为 result[indexe] 没有反应。我应该改进结构吗？只要我得到预期的结果，即每个资源的权限数组，我就可以灵活地更改结构。复选框 = 收音机 atm
如果您可以提供一个最小的 JSfiddle 或 CodeSandbox，我们将使用实际数据来帮助您。

标签： javascript arrays json vue.js vuetify.js

【解决方案1】：

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

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

做到了，我得到了复选框数组，我不知道它为什么起作用，但它确实起作用了。我们将在未来改进我的结构，但现在就可以了。

【讨论】：