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 use separate vue html and typescript file  Here s my code    lt select name  LeaveType   change  onChange    class  form-control  gt        lt option value  1  gt Annual Leave  Off-Day lt  option gt        lt option value  2  gt On Demand Leave lt  option gt   lt  select gt    and here s my ts file  onChange value        console log value       How to get selected option value in my typescript function  Thanks

User · Answer

You can also use v-model for the rescue   lt template gt       lt select name  LeaveType  v-model  leaveType   change  onChange    class  form-control  gt            lt option value  1  gt Annual Leave  Off-Day lt  option gt            lt option value  2  gt On Demand Leave lt  option gt       lt  select gt   lt  template gt    lt script gt  export default       data             return               leaveType                            methods            onChange                 console log  The new value is     this leaveType                     lt  script gt

User · Answer

Use v-model to bind the value of selected option s value  Here is an example    lt select name  LeaveType   change  onChange  event   class  form-control  v-model  key  gt      lt option value  1  gt Annual Leave  Off-Day lt  option gt      lt option value  2  gt On Demand Leave lt  option gt   lt  select gt   lt script gt  var vm   new Vue       data            key                methods            onChange event                console log event target value                     lt  script gt    More reference can been seen from here

User · Answer

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

User · Answer

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   lt select name  LeaveType  onchange  onChange this value   class  form-control  gt    lt option value  1  gt Annual Leave  Off-Day lt  option gt    lt option value  2  gt On Demand Leave lt  option gt   lt  select gt   function onChange value      console log value       If you want to call Vue methods  do it like this-   lt select name  LeaveType   change  onChange  event   class  form-control  gt    lt option value  1  gt Annual Leave  Off-Day lt  option gt    lt option value  2  gt On Demand Leave lt  option gt   lt  select gt   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    lt select v-model  selectedValue  name  LeaveType  onchange  onChange this value   class  form-control  gt    lt option value  1  gt Annual Leave  Off-Day lt  option gt    lt option value  2  gt On Demand Leave lt  option gt   lt  select gt   new Vue       data           selectedValue   1     First option will be selected by default                            methods           onChange function event               console log this selectedValue                        Hope this Helps  -

User · Answer

The changed value will be in event target value   x000D   x000D  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   lt script src  https   cdn jsdelivr net npm vue 2 5 16 dist vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D     lt select name  LeaveType   change  onChange  class  form-control  gt  x000D      lt option value  1  gt Annual Leave  Off-Day lt  option gt  x000D      lt option value  2  gt On Demand Leave lt  option gt  x000D   lt  select gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] Vue.js get selected option on @change

Examples related to javascript

Examples related to html

Examples related to asp.net-mvc

Examples related to vue.js