Nrthugu

I faced a really silly problem today and just sharing it here:

v-for and v-if doesn't work together when its data value is . For eg:

ts: 



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

  Yes

</div>

<div v-else>

  No

</div>

See it in action here in codesandbox.

We can see nothing is rendered and even no error is thrown. I also tried with v-if="ts.length > 0" but it still renders nothing.

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

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.