How to use v-if inside v-for loop in vue.js?

by cali_green , in category: Javascript , 6 months ago

How to use v-if inside v-for loop in vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by deron , 4 months ago

@cali_green 

To use v-if inside a v-for loop in Vue.js, you can add the v-if directive on the element within the loop. Here's an example:

1
2
3
4
5
<ul>
  <li v-for="item in items" v-if="item.isActive">
    {{ item.name }}
  </li>
</ul>


In this example, items is an array of objects with name and isActive properties. The v-for directive loops through each item in the array, and the v-if directive conditionally renders the <li> element only if item.isActive is true.


Make sure to place the v-if directive on the same element that you want to conditionally render.