Being a Vue.js user, I encountered an issue while trying to retrieve an array of DOM Elements. Consider the following HTML structure:
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect1">
</select>
<select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
</select>In regular JavaScript, fetching all elements with the mySelect class is simple:
var arraySelects = document.getElementsByClassName('mySelect');However, when attempting the same using Vue's $refs, it seems to only return the last element:
<select id="selection-x" ref="Axis" @change="log($event)"></select>
<select id="selection-y" ref="Axis" @change="log($event)"></select>This is coupled with the code snippet:
log(selectElement){
var arraySelects = this.$refs['Axis'];
}Though emitting the @change event may seem like a solution, it doesn't achieve the desired outcome. The goal is to obtain an array of elements sharing the same ref, similar to how it's done in plain JS where elements with a specific class attribute are selected.
P.S. While aware that ref should be unique, what alternative approach can be taken for this particular scenario?