Vue.js在@change上获得选择选项 [英] Vue.js get selected option on @change

问题描述

首先，我想说我是Vue的新手，这是我第一次使用Vue的项目。
我有组合框，我想根据所选的组合框做一些不同的事情。我使用单独的vue.html和typescript文件。
这是我的代码。

First, i want to say that im new to Vue, and this is my first project ever using Vue. I have combobox and I want to do something different based on the selected combobox. I use separate vue.html and typescript file. Here's my code.

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

这是我的ts文件

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

如何在我的打字稿功能中获取选定的选项值？谢谢。

How to get selected option value in my typescript function? Thanks.

推荐答案

使用 v-model 来绑定所选的值期权的价值。 这是一个示例。

Use v-model to bind the value of selected option's value. Here is an example.

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

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

这篇关于Vue.js在@change上获得选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！