按钮事件后获取多选值

Question

我需要找到使用Vue，如何获取两个select的选定值，以及按下按钮后的一些输入值。

如何做到这一点，你能给我一个简单的例子吗？

谢谢

Answer 1

要从 vue 中的输入和选择中获取值，您必须使用 v-model 进行绑定。
使用@click 属性处理按钮事件。

<div id="app">
  <h2>Console log values:</h2>
  <input type="text" v-model="inputValue">
  <select name="firstSelect" v-model="firstSelectedValue">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <select name="firstSelect" v-model="secondSelectedValue">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  
  <button @click="getData">Get Data</button>
</div>

在JS部分，你必须定义要绑定的数据&按钮方法：

这里是 vue 中事件处理文档的链接：https://vuejs.org/v2/guide/events.html

new Vue({
  el: "#app",
  data: {
    firstSelectedValue: null,
    secondSelectedValue: null,
    inputValue: '',
  },
  methods: {
    getData: function(){
        console.log("Input value: "+ this.inputValue);
        console.log("First selected value: " + this.firstSelectedValue);
      console.log("Second selected value: " +this.secondSelectedValue);
      }
  }
})

这是一个有效的小提琴：https://jsfiddle.net/2wux39sp/36/，它将控制台记录请求的数据。