vue v-for индекс не определен в объекте массива

Question

У меня есть такой код

<div class="form-group">
    <div class="alert alert-success" v-if="alert_permission">Izin telah diberikan</div>
        <template v-for="(row, index) in permissions">
            <input
              type="checkbox"
              class="flat-red new-select"
              :key="index"
              :checked="row.name == user_permissions[index].name  ? 'checked' : ''"
              :value="row.name"
              @click="addPermission(row.name)"
            />
            {{ row.name.charAt(0).toUpperCase() + row.name.slice(1) }}
            <br :key="'row' + index" />
            <br :key="'enter' + index" v-if="(index+1) %3 == 0" />
        </template>
    </div>
</div>

В моем случае я хочу установить флажок, если row.name совпадает с моделью данных в объекте массива. но если напишите как user_permissions[0].name, это работает только на 1 элемент.

Как я могу использовать индекс в этом случае?

данные разрешений, такие как

[{"id":1,"name":"add course","guard_name":"web","created_at":"2019-10-07 05:30:05","updated_at":"2019-10-07 05:30:05"},{"id":2,"name":"edit course","guard_name":"web","created_at":"2019-10-07 05:30:05","updated_at":"2019-10-07 05:30:05"},{"id":3,"name":"add class","guard_name":"web","created_at":"2019-10-07 05:30:05","updated_at":"2019-10-07 05:30:05"},{"id":4,"name":"edit class","guard_name":"web","created_at":"2019-10-07 05:30:06","updated_at":"2019-10-07 05:30:06"},{"id":5,"name":"delete class","guard_name":"web","created_at":"2019-10-07 05:30:06","updated_at":"2019-10-07 05:30:06"},{"id":6,"name":"add information","guard_name":"web","created_at":"2019-10-07 05:30:06","updated_at":"2019-10-07 05:30:06"},{"id":7,"name":"edit information","guard_name":"web","created_at":"2019-10-07 05:30:06","updated_at":"2019-10-07 05:30:06"},{"id":8,"name":"delete information","guard_name":"web","created_at":"2019-10-07 05:30:06","updated_at":"2019-10-07 05:30:06"},{"id":9,"name":"add score","guard_name":"web","created_at":"2019-10-07 05:30:06","updated_at":"2019-10-07 05:30:06"},{"id":10,"name":"edit score","guard_name":"web","created_at":"2019-10-07 05:30:06","updated_at":"2019-10-07 05:30:06"},{"id":11,"name":"delete score","guard_name":"web","created_at":"2019-10-07 05:30:07","updated_at":"2019-10-07 05:30:07"},{"id":12,"name":"edit user","guard_name":"web","created_at":"2019-10-07 05:30:07","updated_at":"2019-10-07 05:30:07"},{"id":13,"name":"delete user","guard_name":"web","created_at":"2019-10-07 05:30:07","updated_at":"2019-10-07 05:30:07"},{"id":14,"name":"add category","guard_name":"web","created_at":"2019-10-07 05:30:07","updated_at":"2019-10-07 05:30:07"},{"id":15,"name":"edit category","guard_name":"web","created_at":"2019-10-07 05:30:07","updated_at":"2019-10-07 05:30:07"},{"id":16,"name":"delete category","guard_name":"web","created_at":"2019-10-07 05:30:07","updated_at":"2019-10-07 05:30:07"},{"id":17,"name":"add module","guard_name":"web","created_at":"2019-10-07 05:30:07","updated_at":"2019-10-07 05:30:07"},{"id":18,"name":"edit module","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08"},{"id":19,"name":"delete module","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08"},{"id":20,"name":"add presence","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08"},{"id":21,"name":"edit presence","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08"},{"id":22,"name":"delete presence","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08"},{"id":23,"name":"view course","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08"},{"id":24,"name":"view module","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08"},{"id":25,"name":"view score","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09"},{"id":26,"name":"view presence","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09"},{"id":27,"name":"view category","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09"},{"id":28,"name":"view information","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09"},{"id":29,"name":"upload task","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09"}]

мои данные user_permissions, подобные этим

[{"id":23,"name":"view course","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08","pivot":{"role_id":3,"permission_id":23}},{"id":24,"name":"view module","guard_name":"web","created_at":"2019-10-07 05:30:08","updated_at":"2019-10-07 05:30:08","pivot":{"role_id":3,"permission_id":24}},{"id":25,"name":"view score","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09","pivot":{"role_id":3,"permission_id":25}},{"id":26,"name":"view presence","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09","pivot":{"role_id":3,"permission_id":26}},{"id":27,"name":"view category","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09","pivot":{"role_id":3,"permission_id":27}},{"id":28,"name":"view information","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09","pivot":{"role_id":3,"permission_id":28}},{"id":29,"name":"upload task","guard_name":"web","created_at":"2019-10-07 05:30:09","updated_at":"2019-10-07 05:30:09","pivot":{"role_id":3,"permission_id":29}}]

Answer 1

Вы можете использовать some, чтобы перебрать другой массив и проверить, соответствует ли какая-либо из записей текущей строке:

:checked="user_permissions.some(perm => perm.name === row.name)"

Для небольших массивов это должно подойти. Для больших массивов вы можете ускорить его, заменив внутренний массив на объект с именами разрешений в качестве ключей и всеми значениями как true. Такой объект может быть создан как вычисляемое свойство и позволит вам пропустить внутренний цикл.

Answer 2

Я только что приготовил что-то, посмотрев ваши данные и код. Я не проверял это сам, но я надеюсь, что вы видите, что я пытаюсь сделать.

<template>
    <div class="form-group">
        <div class="alert alert-success" v-if="alert_permission">Izin telah diberikan</div>
            <input
              type="checkbox"
              class="flat-red new-select"
              v-model="selectedPermissions"
              v-for="permission in permissions"
              :key="permission.id"
              :checked="userHasPermission(permission.name)"
              :value="permission.name"
              @click="addPermission(permission.name)"
            />{{ permission.name | ucwords }}
        </div>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            selectedPermissions: [],
            permissions; [],
            user_permissions: [],
        }
    },
    mounted ()  {
        // this.permissions = /* call api service to get all permissions */
        // this.user_permissions = /* call api service to get user permissions */
    },
    filters: {
        ucwords (value) {
            const words = String(value).split(/\s+/)
            return words.map(word => {
                let temp = word.trim() 
                return temp.charAt(0).toUpperCase() + temp.slice(1)
            }).join(' ');
        },
    },
    methods: {
        userHasPermission (permissionName) {
            let index = this.user_permissions.findIndex((user_permission) => {
                return user_permission.name === permissionName
            })

            return index !== -1
        },

        addPermission (permissionName) {

        }
    }

}
</script>

Надеюсь, это поможет.

Answer 3

Множественный выбор флажка должен иметь вид массива model.

Когда вы вставляете значение permissions, вы должны вставить результат в флажок model после сравнения.

ex)

<div v-for="(row, index) in permissions">
  <input
    v-model="model"  // array type
    type="checkbox"
    :key="index"
    :value="row.name"
  />{{row.name}}
</div>

Пример кода был создан на рисунке ниже. ручка - https://codepen.io/kdydesign/pen/QWWwBmx?editors=1111