CODEWITHSUNDEEP
javascriptvue.js
dbzx10299
dbzx10299

Reputation: 1106

vue v-for with conditional logic and not missing iteration

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?

Upvotes: 0

Views: 40

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27232

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>

Upvotes: 1

Related Questions