Question

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

<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="item in schedules">
              <td v-if="days.includes(item.day)" class="text-left">{{item.from_time}}-{{item.to_time}}</td>
              <td v-else class="text-left">-</td>
            </template>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
  </v-app>
</div>

<script>
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]
  })
})
</script>

Codepen

schedules（第六天）中的第二项应该放置在星期六列中，而不是在星期二列中。

注意：

如果日程表的索引日= 1，则时间放置在星期一
如果日程表的索引日= 2，则时间放置在星期二
如果日程表的索引日= 3，则时间放置在星期三

以此类推...

如何在工作日列中按日期索引显示schedules个项目？也许解决方案是将schedules和days合并为一个数据对象。

Answer 1

您仅在模板中的schedules数组上进行迭代，因此仅在表主体中呈现了两个单元格。

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

模板代码：

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

脚本代码：


  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;
      }
    }
  })

另请参阅更新的代码笔： https://codepen.io/simonthiel2/pen/Rwwrzav

Answer 2

使用您的原始代码：

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

有几个问题：

您仅要迭代schedules，这可能少于一周中的天数（例如您的示例）。
v-if检查days是否包含该项的日期，这很可能是正确的（假设您的数据始终适合域），因此这有效地使表格呈现了所有{{1} }。

一种解决方案是在计算的道具中对schedules使用Array.prototype.map（即days映射到的日期ID的数组）：

schedules[].day

...并更新您的模板以使用该道具：

export default {
  computed: {
    weekly() {
      return this.days.map(day => this.schedules.find(s => s.day == day))
    }
  }
}

updated codepen

Answer 3

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

new Vue({
    el: '#app',
    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],
      weekday:[]
    }),
    created(){
      for(let i = 0; i < this.days.length;i++){
        var obj = null
        for(let j = 0; j < this.schedules.length; j++){
          if(this.days[i] === this.schedules[j].day){
            obj = this.schedules[j]
            break
          }
        }
        this.weekday.push(obj)
      }
    },
    methods: {
      
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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="day in weekday">
                  <td v-if="day" class="text-left">{{day.from_time}}-{{day.to_time}}</td>
                  <td v-else class="text-left">-</td> 
           </template>

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

我如何在Vuetify中使用数组？

3 个答案: