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 =＆＃34;＆＃34;，但正如文档中所述：

＆＃34; $ refs仅在组件渲染后填充，并且不会被激活。它只是作为直接子操作的逃生舱 - 你应该避免在模板或计算属性中使用$ refs。＆＃34;

Answer 1

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

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

一旦你获得了你的元素，就可以像常规JS一样计算它们，如果你使用this.$ref只读出数组长度。