Как собрать массив чекбоксов в динамический c массив элементов vueJs Vuetify - PullRequest
Новая
       9

Как собрать массив чекбоксов в динамический c массив элементов vueJs Vuetify

0 голосов
/ 19 июня 2020

У меня есть реализация разрешения роли, где у меня есть 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, но для этой проблемы я удалил большинство ссылок на нее.

1 Ответ

0 голосов
/ 20 июня 2020

Спасибо @IVOGELOV, я разобрался, хотя это не так аккуратно, но сейчас нужно будет сделать, я изменил <v-checkbox v-model="result[indexe][index]" :label="item" :value="item" ></v-checkbox> и 

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

, и это сделало это, я получил массив флажков, я не знаю, почему это сработало, но это так. мы улучшим мою структуру в будущем, но пока этого достаточно.

...