Vuejs：如何像这样显示数组值

Question

我想显示日期对象中的值，例如：星期日、星期一等

现在，这是我的代码：

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

我的结果：

[ "Monday", "Wednesday" ]

Answer 1

你可以再做一个循环

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

Answer 2

如果您只想 return 天，请使用 flatMap 函数：

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

如果您想用逗号分隔它们，请使用：

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

或数组之间：

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

Answer 3

我认为这是一个更好、更简单的解决方案

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

Vuejs：如何像这样显示数组值

Vuejs : How to display array value like this

javascript

vue.js

vue-component

vuejs2

vue-cli