[Vuejs]-V-for and v-if not working together when data gets empty array

by

3👍

✅

It’s not recommended to use v-for with v-if . see official docs: https://v2.vuejs.org/v2/guide/conditional.html#v-if-with-v-for

👤Kent V

3👍

One possible solution is to separate v-if from v-for like this:

<div v-if="ts.length">
  <div v-for="t in ts" :key="t">
    Yes
  </div>
</div>
<div v-else>
  No
</div>

But this seems to be bad solution for me while others can use it as a good solution. Because I was needed to use v-for and v-if together. Its because I don’t like to separate pieces from file and just need to use inside table’s tr component.

Though, we agree from the documentation states: Never use v-if on the same element as v-for.

👤Bhojendra Rauniyar

Leave a comment