[英]Vue.js get selected option on @change
首先,我想说我是 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>
这是我的打字稿文件:
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>
您可以将@change="onChange()"保存为使用观察者。 Vue 计算和监视,它就是为此而设计的。 如果您只需要值而不需要其他复杂的事件属性。
就像是:
...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.