在Vue中,我创建了4个选项卡和4个选项卡内容容器。我想在它们上面设置一个ref,然后将其作为一个包含4个元素的数组获取。以下是代码:
https://codepen.io/anon/pen/WVoGYM?&editable=true&editors=101
<div id="app">
<v-app id="inspire">
<v-tabs
fixed-tabs
background-color="indigo"
dark
>
<v-tab>
Option
</v-tab>
<v-tab>
Another Selection
</v-tab>
<v-tab>
Items
</v-tab>
<v-tab>
Another Screen
</v-tab>
<v-tab-item v-for="i in 4">
<div ref="childTabsContent">A</div>
</v-tab-item>
</v-tabs>
</v-app>
</div>
js
new Vue({
el: '#app',
vuetify: new Vuetify(),
mounted : function() {
var vm = this;
setInterval(function() {
var tabs = vm.$refs;
console.log(tabs);
}, 1000);
}
})
它记录了数组
{childTabsContent: Array(1)}
当我期望的是
{childTabsContent: Array(4)}
有人知道怎么回事吗?
注意:此示例使用vuetify 2.0,但那部分不相关。
谢谢
<v-tabs>
组件如何呈现其项目引起的;您正在呈现4个<v-tab-item>
组件,但是<v-tabs>
组件可能只呈现第一个? - Decade Moon