Фильтрация через 2 разных компонента после их рендеринга
Я застрял с этой проблемой: я пытаюсь заказать 2 компонента одного уровня, каждый из которых имеет свои собственные данные со своими свойствами. Но 2 разных данных имеют одно и то же свойство «позиция».
Структура БД
Глава
chapterId
title (string)
position (integer)
Страница
pageId
name (string)
position (integer)
body (text)
Вот мой Резюме.vue
<template>
<div>
<summary-chapter v-for = "chapter in data.chapters" :chapter = "chapter"></summary-chapter>
<summary-page v-for = "page in data.pages" :page = "page"></summary-page>
</div>
</template>
Переменная данных:
data :
{
'chapters' : { {chapterId: 1, ...}, {chapterId: 2, ...}, {chapterId: 3, ...}, ... },
'pages' : { {pageId: 1, ...}, {pageId: 2, ...}, {pageId: 3, ...}, ... }
}
Я ищу такие результаты: Смешанный
Pos: 1 - Page with id of 12
Pos: 2 - Chapter with id of 7
Pos: 3 - Chapter with id of 2
Pos: 4 - Page with id of 4
Pos: 5 - Page with id of 13
Pos: 6 - Chapter with id of 1
Но у меня всегда сначала все главы, а потом все страницы:
Pos: 2 - Chapter with id of 7
Pos: 3 - Chapter with id of 2
Pos: 6 - Chapter with id of 1
Pos: 1 - Page with id of 12
Pos: 4 - Page with id of 4
Pos: 5 - Page with id of 13
Я действительно понятия не имею, как это сделать правильно. Я попытался отфильтровать свойство вычисляемых данных Я пытаюсь создать родительский компонент Сводная строка, который содержит компонент главы или компонент страницы в зависимости от типа Пробую 100 других способов... :(
У вас есть совет?
Спасибо заранее за ваше время.
Луи
Ответы 1
Одним из способов решения этой проблемы является объединение этих двух массивов, а затем сортировка по их положению:
computed: {
sortedItems () {
let chapters = this.chapters.map(chapter => ({ ...chapter, type: 'chapter' }))
let pages = this.pages.map(page => ({ ...page, type: 'page' }))
return []
.concat(chapters)
.concat(pages)
.sort((a, b) => (a.position - b.position))
}
}
Затем в вашем шаблоне визуализируйте его по типу:
<template v-for='item in sortedItems'>
<summary-chapter v-if='item.type === "chapter"' :chapter='item'/>
<summary-page v-if='item.type === "page"' :page='item'/>
</template>
Вы правы, в моем примере кода есть опечатка, но концепция должна работать. codeandbox.io/s/v3wx5zq4l0.
Большое спасибо ! Наконец-то я получил хорошие отсортированные данные с вашим решением. Проблема была в том, что я не мог отобразить это правильно. Ваше шаблонное решение не работает. Мне пришлось поместить цикл в <summary-chapter> с v-if и поместить v-else на <summary-page>, затем я обернул оба компонента <div>, и это сработало! большое спасибо. Я разрешаю вам отредактировать свой ответ, чтобы проголосовать за него как за ХОРОШИЙ ответ