javascript - 如何在 vue.js 中获取 refs 数组？

Question

在 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:数组(1)}

当我期待

{childTabsContent:数组(4)}

有谁知道怎么了？

注意:此示例使用 vuetify 2.0，但这部分无关紧要。

谢谢

Answer 1

仅呈现事件选项卡项的内容。所以其他 div 上的 ref 不存在。

您应该将 refs 添加到循环组件中。

<v-tab-item v-for="i in 4" :key="i" :ref="'childTabsContent' + i">
  <div v-text="'A' + i"></div>
</v-tab-item>

您现在将获得所有组件的数组。

您还可以像这样访问这些组件:

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