Quiero agregar datos en v-tab-item de api a activo según v-tab cada mes.
Por ejemplo, start_at es enero para mostrarse en la pestaña de enero, start_at es febrero para mostrarse en la pestaña de febrero, etc.
modelo
<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) } }}datos de ejemplo en 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", } }, ]Puedes probar con la propiedad calculada:
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>