Vue.js 在@change 上获得选定的选项

Question

首先，我想说我是 Vue 新手，这是我第一个使用 Vue 的项目。

我有一个组合框，想根据选定的组合框做一些不同的事情。我使用单独的 vue.html 和 TypeScript 文件。

这是我的代码：

    <select name="LeaveType" @change="onChange()" class="form-control">
         <option value="1">Annual Leave/ Off-Day</option>
         <option value="2">On Demand Leave</option>
    </select>

这是我的打字稿文件：

    onChange(value) {
        console.log(value);
    }

如何在我的 TypeScript 函数中获取选定的选项值？谢谢。

原文由 hphp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 v-model 绑定所选选项的值。 这是一个例子。

 <select name="LeaveType" @change="onChange($event)" class="form-control" v-model="key">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
 </select>
 <script>
 var vm = new Vue({
 data: {
 key: ""
 },
 methods: {
 onChange(event) {
 console.log(event.target.value)
 }
 }
 }
 </script>

从 这里 可以看到更多的参考。

原文由 ramwin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

@ 是 v-on 的快捷选项。只有当你想执行某些 Vue 方法时才使用 @ 。由于您没有执行 Vue 方法，而是调用 javascript 函数，因此您需要使用 onchange 属性来调用 javascript 函数

<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

function onChange(value) {
  console.log(value);
}

如果你想调用 Vue 方法，这样做 -

 <select name="LeaveType" @change="onChange($event)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
  ...
  ...
  methods:{
    onChange:function(event){
       console.log(event.target.value);
    }
  }
})

您可以在 select 元素上使用 v-model 数据属性来绑定值。

 <select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
    data:{
        selectedValue : 1, // First option will be selected by default
    },
    ...
    ...
    methods:{
        onChange:function(event){
            console.log(this.selectedValue);
        }
    }
})

希望这可以帮助 ：-）

原文由 santanu bera 发布，翻译遵循 CC BY-SA 4.0 许可协议