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

Question

[Роман Абрамов]

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


Отрисовка идет всегда по порядку
Сначала карточки с продуктами, а потом блок с рекламой, хотелось бы найти решение данной задачи.
В моем понимании должно выглядеть, примерно, вот так
Card
Card
Card
Card
Selection
Card
Card
Card
Card

Answer 1

[Дмитрий Гололобов]

Решение в лоб:
Разделить в products на 2 части. products1 и products2 и вывести в шаблоне Блок товаров1 / Рекламу / Блок товаров2

Answer 2

[Игорь Корсаков]

Привет!
Можно через 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
		}
	}
}

Comments

[Роман Абрамов]

Благодарю за помощь

Answer 3

[Дмитрий]

<Card ... />
if (idx === 25) {
  // Вывод рекламы
}