I am currently working on promoting a V-TAB feature, where each tab will display specific data as shown in the following images: https://i.sstatic.net/vhtsG.jpg https://i.sstatic.net/CZxbt.jpg I intend to populate the TAB PROFILE with attributes like firstName, lastName, email, phone, and more. Additionally, I plan to include services array data in the TAB SERVICES, all extracted from the JSON object below:
[
{
"id": 1,
"firstName": "Ana",
"lastName": "Lucia",
"phone": "(11)99989-8989",
"mobilePhone": "(11)99989-8989",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14757a7d7a7c75547379757d783a777b79">[email protected]</a>",
"gender": {
"name": "feminino"
},
"status": {
"name": "inativo"
},
"services": [
{
"name": "progressiva"
},
{
"name": "Manicure"
}
]
}
]
I am uncertain about how to implement this functionality using the v-tab component within the provided Vuetify code snippet:
<template>
<v-container grid-list-xl fluid > ;
<v-layout row wrap> ;
<v-flex sm12> ;
<v-row
class="mb-6"
justify="center"
> ;
<v-col sm="10"& gt ;
<v-card> ;
<v-tabs
v-model="tab"
fixed-tabs
background-color="pink lighten-1"
dark
> ;
<v-tab
v-for="item in items"
:key="item.tab"
> ;
{{ item.tab }}
</v-tab> ;
</v-tabs> ;
<v-tabs-items v-model="tab"& gt ;
<v-tab-item
v-for="item in items"
:key="item.tab"
> ;
<v-row justify="center"& gt ;
<v-col sm="6"& gt ;
<v-card flat> ;
<v-card-text class="body-1"& gt ;{{ item.content }}& lt ;/v-card-text> ;
</v-card> ;
</v-col> ;
</v-row> ;
</v-tab-item> ;
</v-tabs-items> ;
</v-card> ;
</v-col> ;
</v-row> ;
</v-flex> ;
</v-layout> ;
</v-container> ;
& lt ;/template> ;
<script>
import axios from 'axios '
export default {
data () {
return {
tab: null,
employee: [],
items: [
{ tab: 'Comissões', content: 'Here goes COMMISSIONS data' },
{ tab: 'Desempenho', content: 'Here goes PERFORMANCE data' },
{ tab: 'Serviços', content: 'Here goes SERVICES data' },
{ tab: 'Agendamentos', content: 'Here goes APPOINTMENT data' },
{ tab: 'Histórico', content: 'Here goes HISTORY data' },
{ tab: 'Perfil', content: 'Here goes PROFILE data' },
],
}
},
created () {
this.initialize()
},
methods: {
initialize () {
axios.get('http://192.168.26.130:3000/employee/1 ')
.then(response =& gt; {
console.log(response.data);
});
},
},
}
</script>
I am facing challenges in correctly displaying the contents in the respective tabs. For example, including the following content snippet:
{ tab: 'Perfil ', content: 'employee '},
When added, it simply renders the word "employee", while my intention is to render the actual content of the 'employee' object. Similarly, I aim to populate other tabs accordingly. Even after modifying the html snippet as follows:
<v-card-text class="body-1"& gt ;{{ employee}}< ;/v-card-text> ;
The entire 'employee' object gets rendered without proper formatting across all tabs, similar to the scenario depicted in the image: https://i.sstatic.net/nU57L.jpg Any assistance or guidance on resolving this issue would be greatly appreciated.