首先，我想说我是 Vue 的新手，这是我使用 Vue 的第一个项目。
我有一个组合框，想根据选定的组合框做一些不同的事情。我使用一个单独的vue.htmlTypeScript 文件。这是我的代码：
<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 函数中获取选定的选项值？谢谢。
使用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>
从这里可以看到更多参考。
@是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);
}
}
})
希望这可以帮助 ：-）
更改后的值将在 event.target.value
const app = new Vue({
el: "#app",
data: function() {
return {
message: "Vue"
}
},
methods: {
onChange(event) {
console.log(event.target.value);
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<select name="LeaveType" @change="onChange" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</div>您也可以使用v-model进行救援
<template>
<select name="LeaveType" v-model="leaveType" @change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</template>
<script>
export default {
data() {
return {
leaveType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
}
</script>
onChangeMethod --> 您选择的方法，它可以是与您的程序相关的任何内容。
<template>
<select @change="onChangeMethod($event)">
<option value="test">Test</option>
<option value="test2">Test2</option>
</select>
</template>
<script>
data(){
return{
...
}
},
methods:{
onChangeMethod(event)
{
console.log(event.target.value);
}
},
created(){
...
}
</script>