Как можно изменить порядок отрисовки компонентов Vue?

Есть некоторый шаблон. В компоненте Card итерируется 50 объектов из массива Products. Все карточки находятся в div с классом card-columns.
Необходимо, примерно, в середине вставить компонент с рекламой, то есть Selection
5eaaf2ac4f4b6843200110.png

Отрисовка идет всегда по порядку
Сначала карточки с продуктами, а потом блок с рекламой, хотелось бы найти решение данной задачи.
В моем понимании должно выглядеть, примерно, вот так
Card
Card
Card
Card
Selection
Card
Card
Card
Card
  • Вопрос задан
  • 296 просмотров
Решения вопроса 2
@dGololobov
начинающий
Решение в лоб:
Разделить в products на 2 части. products1 и products2 и вывести в шаблоне Блок товаров1 / Рекламу / Блок товаров2
Ответ написан
Комментировать
netwood
@netwood
Эксперт в Web Разработке
Привет!
Можно через computed переменную сделать, концептуальный пример ниже.
<template>
<div>
	<div v-for="flow_item in flow_items" :key="flow_item.id">
		<div v-if="flow_item.type == 'cards'">
			<Card v-for='product in flow_item.items' />
		</div>
		<Selection v-else-if="flow_item.type == 'selection'"/>
	</div>
</div>
</template>


export default {
	computed: {
		flow_items(){
			let result = []

			let products_chunk_1 = []
			let products_chunk_2 = []

			for (let i = 0; i < this.products.length; i++) {
				
				if (this.products.length/2 >= i) {
					products_chunk_1.push(this.products[i])
				} else {
					products_chunk_2.push(this.products[i])
				}
			}

			result.push({
				id: 'flow-item-0',
				type: 'cards',
				items: products_chunk_1
			})

			result.push({
				id: 'flow-item-1',
				type: 'selection'
			})

			result.push({
				id: 'flow-item-2',
				type: 'cards',
				items: products_chunk_2
			})

			return result
		}
	}
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
By_Engine
@By_Engine
<Card ... />
if (idx === 25) {
  // Вывод рекламы
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы