In vue, I create tabs (4 of them), with 4 tab content containers. I want to set a ref on them, and then get it as an array of 4. This is the code
?&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);
}
})
It logs the array
{childTabsContent: Array(1)}
when I expect
{childTabsContent: Array(4)}
Anyone know what's wrong?
Note: this example uses vuetify 2.0, but that part is irrelevant.
Thanks
In vue, I create tabs (4 of them), with 4 tab content containers. I want to set a ref on them, and then get it as an array of 4. This is the code
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);
}
})
It logs the array
{childTabsContent: Array(1)}
when I expect
{childTabsContent: Array(4)}
Anyone know what's wrong?
Note: this example uses vuetify 2.0, but that part is irrelevant.
Thanks
Share Improve this question asked Jul 27, 2019 at 1:04 omegaomega 43.9k89 gold badges285 silver badges521 bronze badges 2- if they should be unique, why have it return an array of length 1, and not just the element itself? – omega Commented Jul 27, 2019 at 1:16
-
The issue is probably caused by how the
<v-tabs>ponent renders its items; you are rendering 4<v-tab-item>ponents but maybe the<v-tabs>ponent only renders the first one? – Decade Moon Commented Jul 27, 2019 at 1:17
2 Answers
Reset to default 8Only the active tab item's content is rendered. So the ref's on the other divs don't exist.
You should add your refs to the looping ponent.
<v-tab-item v-for="i in 4" :key="i" :ref="'childTabsContent' + i">
<div v-text="'A' + i"></div>
</v-tab-item>
You'll now get an array of all the ponents.
You can also access these ponents as such:
Object.keys(this.$refs).forEach(el => {
console.log( this.$refs[el][0] )
})
Only one 'ref' will appear because the others have not been rendered yet.
You can see more details here. $refs return undefined
As soon as you click the other tabs, the other 'refs' will be loaded in the object showing an array of 4 elements.