v-for on the same level with v-if affects v-else

Question

If I do this:

<ul>
<li v-for="value in testData">
  <span v-if="Array.isArray(value)" v-for="morevalue in value"> {‌{ morevalue }}</span>
  <span v-else> {‌{ value }} </span>
</li>
</ul>

The span in v-else will also be looped ON THE SECOND V-FOR even though it doesn't have any v-for on it, why?

This is the Vue instance:

new Vue({
    el: '#exercise',
    data: {
        testData: {
        name: 'TESTOBJECT', 
        id: 10,
        data: [1.67, 1.33, 0.98, 2.21]
        }
    }
});

That is because of the outer `v-for` it is encapsulated in. – Gokul Chandrasekaran Mar 08 '18 at 02:47 — Gokul Chandrasekaran, Mar 08 '18 at 02:47
Well, you have **two** `v-for`s... – acdcjunior Mar 08 '18 at 02:49 — acdcjunior, Mar 08 '18 at 02:49

score 4 · Answer 1 · answered Mar 08 '18 at 02:52

4

v-for has a higher priority than v-if, (ie) v-if will be executed for each loop. If you want to skip execution of the v-for based on the v-if. I would recommend nesting the loop within the condition.

<ul>
<li v-for="value in testData">
  <template v-if="Array.isArray(value)"> 
    <span v-for="morevalue in value"> {‌{ morevalue }} ></span>
  </template>
  <span v-else> {‌{ value }} </span>
</li>
</ul>

answered Mar 08 '18 at 02:52

Gokul Chandrasekaran

545
3
10

However, your code is right, the justification is wrong. The v-if is the one with higher priority, this means will run first that the v-for. Source: https://vuejs.org/guide/essentials/list.html#v-for-with-v-if – XAronX Nov 28 '22 at 10:45

score 1 · Answer 2 · answered Jul 28 '20 at 19:31

1

Can you try something like that:

<div v-if="!!arr?.length">
  <ul>
    <li v-for="value in arr">

      // ...

    </li>
  </ul>
</div>

answered Jul 28 '20 at 19:31

S. zbr

31
2

v-for on the same level with v-if affects v-else

2 Answers2