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.
<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
onChange(value) {
console.log(value);
}
How to get selected option value in my typescript function? Thanks.
This question is related to
javascript
html
asp.net-mvc
vue.js
You can also use v-model for the rescue
<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>
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.
Something like:
...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
The changed value will be in event.target.value
const app = new Vue({_x000D_
el: "#app",_x000D_
data: function() {_x000D_
return {_x000D_
message: "Vue"_x000D_
}_x000D_
},_x000D_
methods: {_x000D_
onChange(event) {_x000D_
console.log(event.target.value);_x000D_
}_x000D_
}_x000D_
})
_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>_x000D_
<div id="app">_x000D_
<select name="LeaveType" @change="onChange" class="form-control">_x000D_
<option value="1">Annual Leave/ Off-Day</option>_x000D_
<option value="2">On Demand Leave</option>_x000D_
</select>_x000D_
</div>
_x000D_
@ 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 onchange attribute to call javascript function
<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-
<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-model data attribute on the select element to bind the value.
<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 :-)
Source: Stackoverflow.com