Js 在@change 上获得选择选项

小开

最佳答案

使用 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 函数，因此需要使用改变属性来调用 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 元素上使用模特数据属性来绑定值。

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

小开

也可以使用模特进行救援

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

小开

您可以保存您的 @ change = “ onChange ()”使用观察者。 Vue 计算机和手表，它就是为此而设计的。以防只需要值而不需要其他复杂的 Event 属性。

比如:

  ...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}

小开

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>