[Vuejs]-Get an array of DOM-Elements in vue js

by

3👍

No. It is not possible with ref and $refs. If you wish to do DOM manipulation then, use vue-directive or directly access DOM from the root element of the component like:

Vue.extend({
    mounted() {
        // Do what you want with your children.
        const children = this.$el.querySelectorAll('.mySelect');
    }
})
👤Harshal Patil

0👍

For me the best way to do this was to set a ref on the parent element (thanks joaner in original comment), but then I also needed to run my code in the “updated” hook so my data was loaded before trying to access the dom (I also have a v-if on the same element I want to reference children):

template:

<ul v-if="dataLoaded" ref="eventlist">
    <li class="eventItem"></li>
    <li class="eventItem"></li>
    <li class="eventItem"></li>
</ul>

javascript:

updated() {
  let eventItems = this.$refs.eventlist.children
  console.log(eventItems)
}
👤Darren

Leave a comment