如何在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: Array(1)}

当我期望的是

{childTabsContent: Array(4)}

有人知道怎么回事吗？

注意：此示例使用vuetify 2.0，但那部分不相关。

谢谢

- omega

---

如果它们应该是唯一的，为什么返回一个长度为1的数组，而不仅仅是元素本身？ - omega

问题可能是由于<v-tabs>组件如何呈现其项目引起的；您正在呈现4个<v-tab-item>组件，但是<v-tabs>组件可能只呈现第一个？ - Decade Moon

Answer 1

只有活动标签项的内容被渲染。因此，其他div上的ref不存在。

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

<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] )
})

- Cue

Answer 2

只有一个'ref'会出现，因为其他的还没有被渲染。

您可以在此处查看更多详细信息。 $refs return undefined

一旦您点击其他选项卡，其他'refs'将被加载到对象中，显示一个包含4个元素的数组。

- Dany_Des