VueJS: How do you provide a context variable to #change handler? - vue.js

Question

I have a select widget inside a loop:
<div v-for="(item, index) in items" :key="index">
<select #change="handleChange">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
When handleChange is triggered, I want to get following pieces of information:
index of the parent loop
value of the selected option
Above code only gives me #2. How do I get #1?

Answer 1

There are several ways that you can do this:
Solution 1: Bind index to an arbitrary HTML5 data- attribute
This approach involves using :data-index="index" on your select element, and then using the e.target.dataset.index to retrieve the bound index of the element
new Vue({
el: '#app',
data: {
items: ['lorem', 'ipsum', 'dolor', 'sit', 'amet']
},
methods: {
handleChange(e) {
console.log(e.target.value, e.target.dataset.index);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<select #change="handleChange" :data-index="index">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
Of course, you can store the index as any other arbitrarily-named data- attribute, e.g. <select #change="handleChange" :data-abc="index"> and then simply accessing it in your JS using e.target.dataset.abc.
Solution 2: Pass index as an argument to the #click callback
This method involves passing $event and index as parameters to your handleChange callback. The $event variable in VueJS allows you to pass the original JS event to the handler:
new Vue({
el: '#app',
data: {
items: ['lorem', 'ipsum', 'dolor', 'sit', 'amet']
},
methods: {
handleChange(e, idx) {
console.log(e.target.value, idx);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<select #change="handleChange($event, index)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>

Answer 2

for parent loop index,
<select #change="handleChange(index)">
for value of selected option, use v-model for two way binding