Vue.js get selected option on @change

Question

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

Answer 1

@ 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

 Annual Leave/ Off-Day
 On Demand Leave


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

If you want to call Vue methods, do it like this-

 Annual Leave/ Off-Day
 On Demand Leave


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.

 Annual Leave/ Off-Day
 On Demand Leave


new Vue({
    data:{
        selectedValue : 1, // First option will be selected by default
    },
    ...
    ...
    methods:{
        onChange:function(event){
            console.log(this.selectedValue);
        }
    }
})

Hope this Helps :-)