How use v-if with array length

Question

I want to show a div if the array length is more than 0. I used it below.

HTML:

<div v-if="countfunc > 0">
  <div v-for="nhp in countfunc">
     <p v-text="nhp.code"></p>
  </div>
</div>

Vue:

computed: {
   countfunc: function(){
     //this return a js array
   }
}

How can I solve my problem?

@adiga Isn't that expensive, as in it calls the function twice. — TheRealChx101
– TheRealChx101, Commented Aug 13, 2022 at 16:15

s.ravi · Accepted Answer · 2020-10-17 18:38:41Z

5

You can use it as countfunc.length>0

answered Oct 17, 2020 at 18:38

s.ravi

1021 silver badge9 bronze badges

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

Comments

drocha87 · Accepted Answer · 2020-10-17 19:13:02Z

0

The thing is, if countfunc is an empty array it will not show anything anyway, so this double check is a little bit unnecessary. Of course in your code you're forgetting the :key property in v-for as well.

Here you can try on codepen, try to delete the object inside the array and let it empty like

<script>
export default {
  data() {
    return {
      items: [],
    };
  },
};
</script>

And you can see that not will be rendered since the array is empty.

answered Oct 17, 2020 at 19:13

drocha87

6295 silver badges13 bronze badges

Collectives™ on Stack Overflow

How use v-if with array length

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related