[英]ref on v-tab-item content is empty in mounted hook
I am using Vuetify tabs to display two different components under different tabs.我正在使用 Vuetify 选项卡在不同的选项卡下显示两个不同的组件。 The issue I am facing here is that, in the
mounted()
when I try to use the refs
of the components it just gives me the ref
of the first component that is details, the general refs doesn't show.我在这里面临的问题是,在
mounted()
当我尝试使用组件的refs
时,它只给我第一个组件的ref
,即细节,一般的 refs 不显示。 Please help me find where I am going wrong.请帮我找出我哪里出错了。
I have added debugger in mounted()
and when I do this.$refs
only the first details refs shows up.我在
mounted()
添加了调试器,当我这样做时this.$refs
只显示第一个细节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>
It's probably because Vuetify is rendering tabs lazily (in other words doesn't render the content of the tab which is still hidden)这可能是因为 Vuetify 懒惰地呈现选项卡(换句话说,不呈现仍然隐藏的选项卡的内容)
You can use eager
prop on v-tab-item
to force rendering of hidden tabs.您可以在
v-tab-item
上使用eager
prop 来强制渲染隐藏的选项卡。 See the docs查看文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.