CODEWITHSUNDEEP
vue.jsvuetify.js
gileneusz
gileneusz

Reputation: 1485

vuejs count number of v-show elements

I need to count a number of v-show elements (cards) that are showing below:

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

this seems easy in js but how to do it in vuejs? My dom is changing dynamically due to search function, so I need to count children elements dynamically.

I've managed to use ref="", but as it is said in documentation:

"$refs are only populated after the component has been rendered, and it is not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid using $refs in templates or computed properties."

Upvotes: 0

Views: 2907

Answers (1)

Hans Koch
Hans Koch

Reputation: 4481

You can get the children of a component via:

  • this.$children
  • Or, query the child elements via this.$el.querySelector(...)
    • If you want the underlying vue component add the elements have a __vue__ propertiey
  • Or, through the ref attribute and access it via this.$refs['yourRefname'] but be aware only refs in v-for are turned into arrays.

Once you've got your elements you can count them like in regular JS, if you use this.$ref just read out the array length.

Upvotes: 2

Related Questions