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

多项选择框必须采用数组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

Answer 2

您可以使用some遍历另一个数组，并检查是否有任何条目与当前行匹配：

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

对于小型阵列，应该没问题。对于较大的数组，您可以通过将内部数组替换为一个对象，该对象的权限名称为键，所有值均为true，从而加快处理速度。可以将此类对象创建为计算属性，并允许您跳过内部循环。

Answer 3

我刚刚通过查看您的数据和代码来烹饪一些东西。我自己还没有测试过，但是希望您能看到正在尝试做的事情。

<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>

希望对您有帮助。

vue v-for索引在数组对象中未定义

3 个答案: