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?

Answer 1

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.

Answer 2

You can use it as countfunc.length>0