javascript - Vue.js get selected option on @change

Question

First, I want to say that I'm new to Vue, and this is my first project ever using Vue.

I have a combobox and want to do something different based on the selected combobox. I use a 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>

Here's my TypeScript file:

    onChange(value) {
        console.log(value);
    }

How do I get the selected option value in my TypeScript function? Thanks.

Answer 1

Use v-model to bind the value of selected option's value. Here is an example.

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