[英]Add data in v-tab-item to be active based on v-tab each month
我想每個月根據 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)
}
}}
您可以嘗試使用計算屬性:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.