vue遍历数据的问题

数据:

      clockDate: [
                    {
                        "time": "07:40",
                        "days": ["周二", "周三"]
                    },
                    {
                        "time": "21:40",
                        "days": ["工作日"]
                    },
                    {
                        "time": "07:40",
                        "days": ["周末"]
                    }
                    , {
                        "time": "06:40",
                        "days": ["周末"]
                    }
                ]

效果:
图片描述

问题:第一层的已经能遍历 就是days里面的数据要怎么遍历?
代码:

                        <span class="text remind-list" v-for="item in clockDate" :key="item.id">
                            <mt-cell-swipe class="remind-item" title="" :right="[
                                          {
                                            content: '删除',
                                            style: { background: 'red', color: '#fff' },
                                            handler: () => this.$messagebox('delete')
                                         }
                                        ]">
                                <div class="time">
                                    <span>{{item.time}}</span>
                                </div>
                                <div class="days" v-for="day in item.days" :key="day.id">
                                    <span>{{day}}</span>
                                </div>
                                <mt-switch v-model="value"></mt-switch>
                            </mt-cell-swipe>
                        </span>

目前效果:
图片描述

阅读 6.8k
7 个回答
<div class="days">
<span v-for="day in item.days">{{day}}</span>
</div>

你不是写对了吗,days就是这么循环的,时间没出来完吗?你看看是不是css的问题,把不过我觉得 v-for="day in item.days" :key="day.id"应该放在span里面吧

从你目前给出的代码没看出问题,遍历就是这样做的,你可以检查一下css看是不是样式导致没显示,浏览器f12里看看文字渲染出来了没有。

<div class="days" v-for="day in item.days" :key="day.id">

<span>{{day}}</span>

</div>

div 块级,内容跑到下面去了,自己调下css

感觉这个key放在这个div这 感觉怪怪的

clipboard.png

Key是必须的,最好有。
v-for里面可以套v-for。
如果是一个组件或者一个整体,可以放一个template标签包起来。vue,v-for

                            <div class="days"  >
                                <span v-for="(day,index) in item.days" :key="day.id">                            {{day}}{{index}}</span>

                            </div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题