"每月根据 v-tab 在 v-tab-item 中添加数据以激活"

Question

我想每个月根据 v-tab 将 v-tab-item 中的数据从 api 添加到活动状态。
例如，start_at 是要显示在一月选项卡上的一月，start_at 是要显示在二月选项卡上的二月，等等。

模板

<v-tabs v-model="tab" show-arrows >
  <v-tab v-for="item in tabmonth" :key="item.name" > {{ item.name }} </v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
   <v-tab-item v-for="item in tabmonth" :key="item.name">
   <v-row v-for="lesson in lessonCourse" :key="lesson.id">
      <h3 class="courseName">{{lesson.course.title}}</h3>
      <p v-if="lesson.live">{{dateFormat(lesson.live.start_at)}}</p>
      <p v-else>{{dateFormat(lesson.onsite.start_at)}}</p>
   </v-row>
   </v-tab-item>
</v-tabs-items>

<script>
 data() {
  return {
  lessonCourse: [],
  tab: null,
  tabmonth: [
    {id:0, name:'January'},
    {id:1, name:'February'},
    {id:2, name:'March'},
    ...
  ],
 }
 }
 method: {
 async getData () {
  try {
    const request = await Axios.get('v1/courses/onsite-live')
    this.lessonCourse = request.lessons
  } catch (error) {
    console.log(error.message)
  }
}}

Answer 1

您可以尝试使用计算属性：