How to get refs array in vue.js?

Question

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

Answer 1

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.

Answer 2

Only 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 component.

<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 components.

You can also access these components as such:

Object.keys(this.$refs).forEach(el => {
  console.log( this.$refs[el][0] )
})