Passing arguments to button onclick method in vuejs - button

Question

I am trying to pass the selected values from the tag and pass it to a button’s click event. However, I was not able to get the data in the onclick function. See the code below.
I am getting undefined in the alert.
Please help.
<div class=“form-group”>
<div class=“form-group” align=“center”>
<label for=“select-Year”>Select CMS Fiscal Year :</label>
<select class=“form-control input-sm” style=“width:120px” id=“select-Year”>
<option v-for=“yr in years” value=“yr”>{{ yr }}</option>
</select>
</div>
<br/><br/>
<div class=“form-group” style=“align:center”>
<button id=“btnSubmit” class=“btn btn-primary” style=“align:center” v-on:click=“loadData(yr, $event)”>Open</button>
</div>
</div>
methods: {
`loadData`: function(yr, event){
alert(yr);
}
}

Answer 1

I tried to do this for you, go to the page and see <https://jsfiddle.net/Lr3psu2y/>.
Hope it with help for you.

Answer 2

The yr variable only exists within the scope of option when you used v-for on it.
That's why it's causing an error when you try to pass it to the event handler of your button which is located outside the scope of v-for.
How can I get selected option?
One way to get the year selected is to declare a year variable under your component data attribute and use the v-model directive on your select field to form a two-way binding.
data: function() {
return {
year: null
}
}
And in your select and button tags,
<select class="form-control input-sm" style="width:120px" id="select-Year" v-model="year">
<option v-for="yr in years" value="yr">{{ yr }}</option>
</select>
<button id="btnSubmit" class="btn btn-primary" style="align:center" v-on:click="loadData($event)">Open</button>
In this way, you can get access to the year in loadData,
loadData(event) {
console.log(this.year, event);
}