Is it good practice to use V-for inside V-if in Vue.js?

Question

There is a case where we used:

<template>
  <div id="app">
    <button @click="fetch">Fetch numbers</button>

    <div v-if="!getNumbers.length">Waiting for numbers...</div>

    <div v-if="getNumbers.length">
      <div v-for="number in getNumbers" :key="number.id">
        <h5>{{ number.owner }}</h5>
        <p>{{ number.phone }}</p>
      </div>
    </div>
  </div>
</template>

Is it a good practice? If not then how can be this improved?

I don't see why that will be a problem. The thing is, VueJS uses a virtual DOM so all the changes you make at runtime will be bunched/chunked together before writing it out to the actual DOM tree anyway :) the only thing is that you shouldn't use v-for and v-if together (which you're not doing anyway). The only optimization I would suggest is that you use <template> for the outer v-if, since you're using the div as simply a placeholder element. — Terry
– Terry, Commented Feb 25, 2020 at 15:05
Sure. Since you are checking against a boolean, then it makes sense to use v-else instead, but that shouldn't change the computational effort behind it. — Terry
– Terry, Commented Feb 25, 2020 at 15:08
I got confused by this part: The only optimization I would suggest is that you use <template> for the outer v-if since you're using the div as simply a placeholder element. Can you show it on code wht you mean? — NewTech Lover
– NewTech Lover, Commented Feb 25, 2020 at 15:12
Use <template v-if="getNumbers.length"> ... </template>, so you don't unnecessary produce a dummy <div> element. Or even better, just <template v-else> — Terry
– Terry, Commented Feb 25, 2020 at 15:13

tony19 · Accepted Answer · 2022-07-15 01:04:48Z

1

Like you do it is OK. From style guide of vueJs : https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

edited Jul 15, 2022 at 1:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 25, 2020 at 15:24

Jonathan COHEN

1252 gold badges2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it good practice to use V-for inside V-if in Vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related