I'm working on a project that utilizes Vuetify tabs to showcase two different components under separate tabs. The problem I'm encountering is that, within the mounted() function, when attempting to access the refs of the components, only the ref of the first component (details) appears and the general refs are not visible. Any assistance in identifying my mistake would be greatly appreciated.
To troubleshoot, I've added a debugger in the mounted() function and found that only the details refs show up when using this.$refs.
<template>
<div>
<v-tabs slot="extension"
v-model="tab_title"
centered
color="black"
slider-color="red">
<v-tab key="details" href="#tab-details">Details</v-tab>
<v-tab key="general" href="#tab-general">General</v-tab>
</v-tabs>
<v-tabs-items touchless v-model="tab_title">
<v-tab-item key="details" value="tab-details">
<v-card flat>
<Details ref="details_form"></Details>
</v-card>
</v-tab-item>
<v-tab-item key="general" value="tab-general">
<v-card flat>
<Info ref="general_form" :agent="agent"></Info>
</v-card>
</v-tab-item>
</v-tabs-items>
</div>
</template>
<script>
import Details from 'views/details.vue';
import Info from 'views/info.vue';
export default {
components: {
Info,
Details,
},
props: ['agent'],
data: function () {
return {
tab_title: 'tab-account-details'
};
},
mounted: function () {
debugger
}
};
</script>