[英]Add data in v-tab-item to be active based on v-tab each month
I want add data in v-tab-item from api to active based on v-tab each month.我想每个月根据 v-tab 将 v-tab-item 中的数据从 api 添加到活动状态。
For example, start_at is January to be show on the January tab, start_at is February to be show on the February tab, etc.例如,start_at 是要显示在一月选项卡上的一月,start_at 是要显示在二月选项卡上的二月,等等。
template模板
<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)
}
}}
You can try with computed property :您可以尝试使用计算属性:
![]()
new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { lessonCourse: [ {"id": 1, "title": "Live1", "live": { "id": 1, "start_at": "2022-01-27 16:00:00", "end_at": "2022-01-27 16:20:00"}}, {"id": 2, "title": "OnSite1", "onsite": { "id": 1, "start_at": "2022-02-28 13:00:00", "end_at": "2022-02-28 16:00:00"}}, ], tab: null, tabmonth: [ {id:0, name:'January'}, {id:1, name:'February'}, {id:2, name:'March'}, ], } }, computed: { withMonths() { if (this.tab !== null) { return this.lessonCourse.map(les => { if (les.live) { les.month = new Date(les.live.start_at).getMonth() } else if (les.onsite) { les.month = new Date(les.onsite.start_at).getMonth() } return {...les} }).filter(l => l.month === this.tab) } } }, methods: { \/\/ async getData () { \/\/try { \/\/const request = await Axios.get('v1\/courses\/onsite-live') \/\/this.lessonCourse = request.lessons \/\/} catch (error) { \/\/ console.log(error.message) \/\/ } } })<\/code><\/pre>
<link href="https:\/\/fonts.googleapis.com\/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https:\/\/cdn.jsdelivr.net\/npm\/@mdi\/font@6.x\/css\/materialdesignicons.min.css" rel="stylesheet"> <link href="https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.x\/dist\/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <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-card mb2 v-for="lesson in withMonths" :key="lesson.id"> <h3 class="courseName">{{lesson.title}}<\/h3> <p v-if="lesson.live">{{lesson.live.start_at}} <p v-else>{{lesson.onsite.start_at}} <\/v-card> <\/v-tab-item> <\/v-tabs-items> <\/v-container> <\/v-main> <\/v-app>
<script src="https:\/\/cdn.jsdelivr.net\/npm\/vue@2.x\/dist\/vue.js"><\/script> <script src="https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.x\/dist\/vuetify.js"><\/script><\/code><\/pre>
"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.