v-for с условным элементом, без

Question

Я не могу найти ответ на свой вопрос в других вопросах, поэтому решил опубликовать свой собственный.

Прежде всего, я знаю, что вы должны отфильтровать массив перед его циклом. Но в моем случае это не сам массив, который доставляет мне неприятности.

В моем случае я перебираю массив с продуктами. Это делает мой компонент. Теперь на каждом xx продукте я хочу сделать рекламный текст, который находится между компонентами продукта.

Итак, мой код:

<template v-for="(product, index) in products">
<product>
<promotion v-if="showOnIndex(index)">
</template>

Теперь мой вопрос, это путь к go? Когда код отображает входные данные <!-- --> после каждого продукта, влияет ли это на количество узлов, которое Google учитывает при проведении аудита? Есть ли способ предотвратить пустой тег комментария?

Answer 1

Я не думаю, что вы можете изменить поведение ложного условия в v-if. Вы также можете проверить эту нить по этой причине.

Если вы используете v-show, вы удалите пустые теги, но у вас будут узлы продвижения для всех продуктов.

Один из способов исправить это - иметь 2 компонента для продуктов:

• product
• productWithPromotion

и использование : is переключаться между ними

<template v-for="(product, index) in products">
 <component :is="showOnIndex(index)? 'product' : 'productWithPromotion'" />
</template>