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

Posted 2023-02-23

【中文标题】Vuejs：如何显示这样的数组值

【英文标题】：Vuejs : How to display array value like this

【发布时间】：2020-12-25 16:51:12

【问题描述】：

我想显示 day 对象中的值，例如：Sunday、Monday 等

现在，这里是我的代码：

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

我的结果：

[ "Monday", "Wednesday" ]

【参考方案1】：

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

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

【参考方案2】：

如果您只想返回日期，请使用 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>

【参考方案3】：

你可以做另一个循环

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

【讨论】：

但是，对于结果，如何保留逗号？

您可以在 day 之后添加逗号，例如 day ，

我实际上希望逗号在数组之间，但即使这样也很好，谢谢