Get an array of DOM-Elements in vue js

Question

I am trying to get an array of DOM-Elements in Vue.js. If I had the following HTML structure:

 <select onchange="toggleDisability(this);" class="mySelect" id="mySelect1"> 
 </select>
 <select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
 </select>

I could get all elements with the mySelect class with normal JS like:

var arraySelects = document.getElementsByClassName('mySelect');

Now I am trying to get the same thing with Vue $refs, but I am always getting the last element. it looks like:

<select id="selection-x" ref="Axis"  @change="log($event)"></select>
<select id="selection-y" ref="Axis"  @change="log($event)"></select>

and

        log(selectElement){
   var arraySelects = this.$refs['Axis'];
}

Of course there are also options ,so that @change event gets emitted, but it doesn't do what I want it to. I want to get an array of the elements with the same ref just like it works in the example above for normal JS, where you are getting an array of select elements whose class attribute equals to mySelect.

P.S. I know ref should be unique, but how could it be then used for this particular usecase?

"... it doesn't do what I want it to." What do you want it to do? — VisioN
– VisioN, Commented Jun 25, 2018 at 10:39
it's no way, but you can custom a directive like npmjs.com/package/vue-multi-ref — joaner
– joaner, Commented Jun 25, 2018 at 10:50
best practice is to specify a ref for the parent element. this.$refs.selectwrap.children — joaner
– joaner, Commented Jun 25, 2018 at 10:53

Harshal Patil · Accepted Answer · 2018-06-25 10:54:56Z

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');
    }
})

answered Jun 25, 2018 at 10:54

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Darren · Accepted Answer · 2019-04-15 16:53:51Z

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

answered Apr 15, 2019 at 16:53

Darren

211 silver badge4 bronze badges

Collectives™ on Stack Overflow

Get an array of DOM-Elements in vue js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related