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

这是我的 TypeScript 文件:

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

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

Answer 1

使用v-model 绑定(bind)所选选项的值。 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>

更多引用可以引用here .