I want add data in v-tab-item from api to active based on v-tab each month.
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.
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)
}
}}
example data in api .json
"lessons": [
{
"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-29 13:00:00",
"end_at": "2022-02-29 16:00:00",
}
},
]
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)
// }
}
})<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>
<p v-else>{{lesson.onsite.start_at}}</p>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-container>
</v-main>
</v-app>
</div>
<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>