vuejs 计算 v-show 元素的数量

Question

我需要计算下面显示的 v-show 元素（卡片）的数量：

<v-layout v-show="checkArray(offer, speciality)">
   <v-flex>
      <v-card>
      ....
      <v-card>
   <v-flex>
</v-layout>

这在 js 中似乎很容易，但如何在 vuejs 中做到这一点？ 由于搜索功能，我的 dom 正在动态变化，因此我需要动态计算子元素。

我已经设法使用 ref=""，但正如文档中所说：

“$refs 仅在组件渲染后填充，它不是响应式的。它只是作为直接子操作的逃生舱口 - 你应该避免在模板或计算属性中使用 $refs。”

Answer 1

您可以通过以下方式获取组件的子级：

• this.$children
• 或者，通过this.$el.querySelector(...)查询子元素
  • 如果你想要底层的 vue 组件添加元素有一个__vue__ 属性
• 或者，通过 ref 属性并通过 this.$refs['yourRefname'] 访问它，但请注意只有 v-for 中的 ref 会转换为数组。

一旦你有了你的元素，你就可以像在普通 JS 中一样计算它们，如果你使用 this.$ref，只需读出数组长度。