CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-cli
Fenz
Fenz

Reputation: 139

Vuejs : How to display array value like this

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

enter image description here

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" ]

Upvotes: 1

Views: 891

Answers (3)

Adem yal&#231;ın
Adem yal&#231;ın

Reputation: 206

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>

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 2

Anis
Anis

Reputation: 1220

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>

Upvotes: 2

Related Questions