Vue js : how to show length of array JSON

Question

in my Vue js project, i wanted to show the length of specific data in API and when i wrote code below i got the status sold length = 5 repeated 5 times, while i want to show only one time like 5 only is there a way to do it?

<span class="text-success mr-2" v-for="(flatno,index) in Flats " 
:key="index" v-show="flatno.status ==='sold'" >   
   {{flatno.status.length}}
</span>

Boussadjra Brahim · Accepted Answer · 2021-12-30 17:09:50Z

2

I recommend to define a computed property called flatSoldStatusLength that returns the length of the flats with status equals to sold :

computed:{
  flatSoldStatusLength(){
    return this.Flats.filter(flat=>flat.status==='sold').length;
  }
}

in template :

<span class="text-success mr-2"  >   
   {{flatSoldStatusLength}}
</span>

answered Dec 30, 2021 at 17:09

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

danh Over a year ago

Or just {{Flats.length}} to show the length of all results. I think you've made a good guess that the OP wants to know how many meet the sold condition.

Collectives™ on Stack Overflow

Vue js : how to show length of array JSON

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related