Tengo una lista de productos y los estoy recorriendo con un bucle v-for. Por el bien de este ejemplo, digamos que tengo 5 productos. Quiero decir que si estamos en la tercera iteración, o índice de 2, en lugar de mostrar un producto, muestre una imagen promocional.
//Expected Output // there are 5 products <template v-for="product in collection.products"> <div class="product-item item--1x1">Product 1</div> <div class="product-item item--1x1">Product 2</div> <div class="promotion-image item--2x2"></div> <div class="product-item item--1x1">Product 3</div> <div class="product-item item--1x1">Product 4</div> <div class="product-item item--1x1">Product 5</div> </template>Mi implementación fue así
<template v-for="(product, index) in collection.products"> <div v-if="index === 2" class="promotion-image item--2x2"></div> <div v-else class="product-item item--1x1 </template>Lo que sucede es que el último producto se corta obviamente y va solo al producto 4. ¿Cómo puedo hacer que la tercera iteración muestre una imagen y continúe recorriendo todos los productos?
Para lograr eso, puede eliminar v-else case.
demostración :
new Vue({ el: '#app', data: { collection: { products: ['Product 1', 'Product 2', 'Product 3', 'Product 4', 'Product 5'] } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <template v-for="(product, index) in collection.products"> <div v-if="index === 2" class="promotion-image item--2x2">Image</div> <div class="product-item item--1x1">{{ product }}</div> </template> </div>