#vue.js
Вопрос:
У меня есть массив папок и массив групп, принадлежащих папкам. Я использую v-for для отображения групп, принадлежащих таким папкам, как эта, но как я могу заставить их правильно отображаться в соответствии с папкой, к которой они принадлежат. У меня есть folder_id
свойство в каждой группе объектов, и я думаю, что мне нужно его сравнить, folder.id
но я понятия не имею, куда его поместить. Вот картина моей проблемы. В каждой папке должно быть по 1 группе. Пожалуйста, помогите
<div
v-for="(folder, index) in list_folders"
:key="folder.id"
class="d-block mb-11"
>
<div class="d-flex align-items-center mb-5">
<i class="fas fa-folder me-3 fs-30 text-primary"></i>
<span
@click="showModalEditFolder(index)"
class="text-primary fs-15 cursor-pointer"
>{{ folder.name }}</span
>
</div>
<div class="d-block">
<ul class="list-unstyled m-0">
<li
v-for="group in list_groups"
:key="group.id"
class="d-flex align-items-center mb-3"
>
<input
class="form-check-input w--4 h--4 rounded-0 m-0 me-6"
type="checkbox"
:value="group.id"
:id="group.id"
/>
<div class="w--11 h--11 me-3">
<img
:src="group.avatar"
alt="group-avatar"
class="img-cover w-100"
/>
</div>
<label :for="group.id" class="form-check-label">
{{ group.name }}
</label>
<div class="ms-auto">
<input
type="checkbox"
class="btn-check"
:id="`notify${group.id}`"
v-model="group.notify_option"
:true-value="1"
:false-value="0"
/>
<label
class="fs-15 text-primary cursor-pointer"
:for="`notify${group.id}`"
>{{
group.notify_option === 1
? $t('common.select.notify')
: $t('common.select.no_notify')
}}</label
>
</div>
</li>
</ul>
</div>
</div>
getFolders() {
let data: any[] = [
{
id: 100,
name: '店舗',
order_position: 1
},
{
id: 101,
name: '東日本統括部',
order_position: 2
}
]
this.list_folders = data
}
getGroupsOfUser() {
let data: any[] = [
{
id: 200,
folder_id: 100,
avatar: require('@/assets/images/group-avatar2.png'),
order_position: 1,
name: '仙台営業所',
notify_option: 0
},
{
id: 201,
folder_id: 101,
avatar: require('@/assets/images/group-avatar3.png'),
order_position: 2,
name: '東日本統括部',
notify_option: 1
}
]
this.list_groups = data
}
Ответ №1:
Решение 1
Просто добавьте v-если в
<li
v-for="group in list_groups"
:key="group.id"
class="d-flex align-items-center mb-3"
>
<template v-if="group.folder_id === folder.id">
// li content
<template>
</li>
Решение 2
Добавьте вычисляемое свойство, чтобы получить отфильтрованный список
<li
v-for="group in list_groups"
:key="group.id"
class="d-flex align-items-center mb-3"
>
<template v-if="group.folder_id === folder.id">
// li content
<template>
</li> <li
v-for="group in getListGroups(folder.id)"
:key="group.id"
class="d-flex align-items-center mb-3"
>
// li code
</li>
computed: {
getListGroups(folderId) {
return this.list_groups.filter(x => x.folder_id === folderId)
}
}
Комментарии:
1. @Лукас обновил ответ еще одним вариантом.
2. Да, это работает. Огромное спасибо