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

2

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>

edited Sep 7, 2020 at 9:29

answered Sep 7, 2020 at 9:23

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

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

2

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>

answered Sep 7, 2020 at 9:31

Adem yalçın

2062 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vuejs : How to display array value like this

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related