Передача аргументов методу onclick кнопки в vuejs

Question

Я пытаюсь передать выбранные значения из тега и передать его в событие нажатия кнопки. но я не смог получить данные в функции при нажатии. см. код ниже. Я получаю неопределенный в предупреждении. Пожалуйста, помогите.

<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

Я пытался сделать это для вас, перейдите на страницу и увидите <https://jsfiddle.net/Lr3psu2y/>.
Надеюсь, что это поможет вам.

Answer 2

Переменная yr существует только в области действия option, если вы использовали v-for для нее.

Именно поэтому она вызывает ошибку, когда вы пытаетесь передать ее обработчику событий вашего button, который находится за пределами области действия v-for.

Как получить выбранный вариант?

Один из способов выбрать year - объявить переменную year в атрибуте вашего компонента data и использовать директиву v-model в вашем поле select, чтобы сформировать два переплет.

data: function() {
  return {
    year: null
  }
}

А в тегах select и button,

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

Таким образом, вы можете получить доступ к year в loadData,

loadData(event) {
  console.log(this.year, event);
}