Sometimes we use v-if conditionals with v-for to filter our data. It’s super tempting to want to use v-if with v-for in order to filter elements of an array.
This is very bad practice. Don't do it again. The problem with this is that VueJS prioritizes the v-for directive over the v-if directive. So under the hood, it loops through every element and THEN checks the v-if conditional.
Read also : Conditionals and Loops | Vue Native
This means that even if we only want to render a few elements from a list, we’ll have to loop through the entire array. Isn't it ? So this can be a smarter solution to avoid such condition. See the below example.
this.items.map(function (item) {
if (item.price < 500) {
return item
}
})
Have a look an another solution of that which is a bit different from above example.
This is good for a few reasons.
Hope it can help you.
#vue-js #dev-tips