Vuejs : How to display array value like this

Question

I want to display the values in the day object such as: Sunday, Monday, etc.

For now, here my code:

<div class="col-md-3 col-sm-6" v-for="item in result" v-bind:key="item.schedule_id"> {{ item.day }} </div>

My result:

[ "Monday", "Wednesday" ]

Anis · Accepted Answer · 2020-09-07 09:17:21Z

2

You can do another loop as

 <div class="col-md-3 col-sm-6" v-for="item in result" v-bind:key="item.schedule_id"> <div v-for="(day , index) in item.day" :key="index"> {{day}} </div> </div>

answered Sep 7, 2020 at 9:17

Anis

1,2293 gold badges16 silver badges29 bronze badges

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

3 Comments

Fenz Over a year ago

But, for the result, how to retain the comma?

Anis Over a year ago

you can add comma after {{day}} like {{day}} ,

Fenz Over a year ago

I actually want the commas to be between the arrays, but even this is fine, thanks

Boussadjra Brahim · Accepted Answer · 2020-09-07 09:29:39Z

If you want just return the days use the flatMap function :

<div class="col-md-3 col-sm-6" v-for="day in result.flatMap(item=>item.day)" v-bind:key="day"> {{ day }} </div>

if you want to separate them by comma use this :

<div class="col-md-3 col-sm-6" > {{ result.flatMap(item=>item.day).join(',') }} </div>

or between arrays:

<div class="col-md-3 col-sm-6" > {{ result.map(item=>item.day).join(',') }} </div>

Adem yalçın · Accepted Answer · 2020-09-07 09:31:19Z

I think it's a better and easy solution

<div class="col-md-3 col-sm-6" v-for="item in result" :key="item.schedule_id"> {{ item.day.join(',') }} </div>

Collectives™ on Stack Overflow

Vuejs : How to display array value like this

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related