Question

我正在尝试将代码中选择的值传递给按钮的click事件。但是我无法在点击功能中获取数据。请参阅下面的代码。我在警报中变得不确定。请帮忙。

<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

yr变量仅在您使用option时在v-for范围内存在。

这就是为什么当您尝试将其传递到button范围之外的v-for的事件处理程序时会导致错误的原因。

如何获得所选选项？

一种选择year的方法是在组件year属性下声明一个data变量，并在select字段上使用v-model指令形成双向绑定。

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

在您的选择和按钮标签中，

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

Answer 2

我尝试为您执行此操作，请转到页面并查看<https://jsfiddle.net/Lr3psu2y/>。
希望对您有帮助。

将参数传递给Vue.js中的按钮onclick方法

2 个答案: