Arrays 如何在vuetify中的数组中使用？

以下代码的数组项未呈现在右列中：

周一
星期二
结婚
清华大学
星期五
坐
太阳
{{item.from{u time}}-{{item.to{u time}
-
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据：（）=>({
附表：[
{日期：1，从_时间：'15:00'到_时间：'13:00'}，
{第6天，从_时间：'16:00'到_时间：'16:30'}，
],
天数：[1,2,3,4,5,6,7]
})
})

时间表（第6天）中的第二项应放在Sat列，而不是Tue列

注:


如果时间表的索引日=1，则列Mon中的时间

如果时间表的索引日=2，则列Tue中的时间

如果时间表的索引日=3，则列Wed中的时间


等等

如何按项目的日期索引呈现工作日列中的
计划
项目？可能解决方案是将
计划
和
天数
组合为一个数据对象。
您只是在模板中的计划数组上迭代，因此在表体中只呈现了两个单元格

我更新了模板和脚本代码以获得预期的输出

模板代码：

<div id="app">
  <v-app>
    <v-simple-table>
     <template v-slot:default>
       <thead>
         <tr>
           <th class="text-left">Mon </th>
           <th class="text-left">Tue</th>
           <th class="text-left">Wed </th>
           <th class="text-left">Thu</th>
           <th class="text-left">Fri </th>
           <th class="text-left">Sat </th>
           <th class="text-left">Sun</th>
         </tr>
       </thead>
       <tbody>
         <tr>

           <template v-for="dayEntry in days">
                  <td v-if="getScheduleByDay(dayEntry)" class="text-left">{{getScheduleByDay(dayEntry).from_time}}-{{getScheduleByDay(dayEntry).to_time}}</td>
                  <td v-else class="text-left">-</td> 
           </template>

        </tr>
      </tbody>
    </template>
  </v-simple-table>
  </v-app>
</div>

另请参见更新的代码笔：
在原始代码中：


{{item.from{u time}}-{{item.to{u time}
-

有几个问题：

您只迭代
计划
，这可能少于一周中的天数（在您的示例中就是这样）
v-if
检查
days
是否包含项目的日数，这可能是真的（假设您的数据始终符合域），因此这有效地使表按顺序呈现所有
计划
项目
一种解决方案是在计算属性中使用
days
上的
Array.prototype.map
（即
调度[]。day
映射到的日ID数组）：

导出默认值{
计算：{
每周（{
返回this.days.map（day=>this.schedules.find（s=>s.day==day））
}
}
}

…并更新模板以使用该道具：


{{item.from{u time}}-{{item.to{u time}
-

如果您希望将这两种数据结合起来，您可以这样做，它完全可以正常工作


newvue({
el:“#应用程序”，
数据：（）=>({
附表：[
{日期：1，从_时间：'15:00'到_时间：'13:00'}，
{第6天，从_时间：'16:00'到_时间：'16:30'}，
],
天数：[1,2,3,4,5,6,7]，
工作日：[]
}),
创建（）{
for（设i=0；i


周一
星期二
结婚
清华大学
星期五
坐
太阳
{{day.from{u time}}-{{day.to{u time}}
- 
谢谢。但还有别的办法吗？例如，将计划和天数合并为1个数据。然后显示组合数据。但组合数据使用的是脚本

  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
      schedules: [
        { day: 1, from_time: '15:00', to_time: '13:00' },
        { day: 6, from_time: '16:00', to_time: '16:30' },
      ],
      days: [1,2,3,4,5,6,7]
    }),
    methods: {
      getScheduleByDay(dayEntry) {
        console.log(dayEntry)
        const relevantDay = this.schedules.filter(entry => entry.day === dayEntry);
        if(relevantDay.length > 0)
          return relevantDay[0];
        return null;
      }
    }
  })