I have a list of products and I am looping over them with a v-for loop. For the sake of this example lets say I have 5 products. I want to say that if we are on the third iteration, or index of 2, instead of displaying a product, display a promotional image.
//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>
My implementation was like this
<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>
What happens is the last product gets cut off obviously and goes only to product 4. How can I make it that the third iteration displays an image and continues to loop through all the products?
To achieve that you can remove v-else case.
Demo :
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>