Как я могу использовать в массиве в Vuetify?

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 (день 6) следует поместить в столбец Сб , а не в столбец Вт .

Примечание:

• Если индексный день расписаний = 1,время в столбце Пн
• Если индексный день расписаний = 2, время в столбце Вт
• Если индексный день расписаний = 3время в столбце ср

и т. д. *

Как отобразить schedules элементов в столбцах дня недели по их индексу дня? Возможно, решение состоит в том, чтобы объединить schedules и days в один объект данных.

Answer 1

Вы перебираете только массив расписаний в своем шаблоне и, следовательно, отображаете только две ячейки в теле таблицы.

Я обновил шаблон и код сценария, чтобы получить ожидаемый результат.

код шаблона:

<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

Если вы рассчитываете объединить обе эти данные, вы можете сделать это следующим образом, это будет хорошо работать

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>

Answer 3

В исходном коде:

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

Есть пара проблем:

1. Вы выполняете только schedules, что может быть меньше количества днейчерез неделю (как в вашем примере).
2. v-if проверяет, включает ли days номер дня элемента, который, вероятно, будет истинным (при условии, что ваши данные всегда соответствуют домену), поэтомуэто эффективно заставляет таблицу отображать все элементы schedules по порядку.

Одним из решений является использование Array.prototype.map для days (т. е. массив идентификаторов дней, с которыми schedules[].day отображается) в вычисленной подпорке:

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

... и обновите свой шаблон, чтобы использовать эту подпорку:

<template v-for="item in weekly">
  <td v-if="item" class="text-left">{{item.from_time}}-{{item.to_time}}</td>
  <td v-else class="text-left">-</td>
</template>

обновленная кодовая ручка