Javascript Vue.js 在 @change 上获得选中的选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50982408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js get selected option on @change
提问by hphp
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.
首先，我想说我是 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>
and here's my ts file
这是我的 ts 文件
onChange(value) {
console.log(value);
}
How to get selected option value in my typescript function? Thanks.
如何在我的打字稿功能中获取选定的选项值？谢谢。
回答by ramwin
Use v-modelto bind the value of selected option's value. Here is an example.
使用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>
More reference can been seen from here.
从这里可以看到更多参考。
回答by santanu bera
@is a shortcut option for v-on. Use @only when you want to execute some Vue methods. As you are not executing Vue methods, instead you are calling javascript function, you need to use onchangeattribute to call javascript function
@是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);
}
If you want to call Vue methods, do it like this-
如果你想调用 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);
}
}
})
You can use v-modeldata attribute on the select element to bind the 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);
}
}
})
Hope this Helps :-)
希望这可以帮助 ：-）
回答by Agney
The changed value will be in event.target.value
更改后的值将在 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/[email protected]/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>回答by Merhawi Fissehaye
You can also use v-modelfor the rescue
您也可以使用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>
回答by biojazzard
You can save your @change="onChange()"an use watchers. Vue computes and watches, it′s designed for that. In case you only need the value and not other complex Event atributes.
您可以保存您的@change="onChange()"并使用观察者。Vue 计算和观察，它就是为此而设计的。如果您只需要该值而不需要其他复杂的事件属性。
Something like:
就像是：
...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
