get vue-select value not working

Question

I am trying to get the selected value from vue-select but have used all methods and searched for help but can this to work, I also having the alert triggered when the page loads

 Vue.component('v-select', VueSelect.VueSelect) new Vue({ el: '#app', data: { options: [ {id: 1, label: 'foo'}, {id: 3, label: 'bar'}, {id: 2, label: 'baz'}, ], selected: '', }, methods: { runme: function() { alert(this.selected); } } }) 

 body { font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; } h1 { font-size: 26px; font-weight: 600; color: #2c3e5099; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; -moz-text-size-adjust: none; } #app { max-width: 30em; margin: 1em auto; } 

 <script src="https://vuejs.org/js/vue.js"></script> <script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script> <div id="app"> <h1>Vue Select - Using v-model</h1> <v-select v-model="selected" :on-change="runme" :options="options"></v-select> </div> 

Answer 1

vue-select author here. The on-change callback will be deprecated in v2.5.0 and removed in v2.6.0 . Here's the prop from the v2.4.0 source:

/**
 * An optional callback function that is called  
 * each time the selected value(s) change.
 *
 * @type {Function}
 * @param {Object || String} val
 */
onChange: {
  type: Function,
  default: function (val) {
    this.$emit('input', val)
  }
}

As Bob Dust explained, the key here is that onChange calls this.$emit('input',val) , which is what Vue hooks into to provide the v-model syntax. If the event is not emitted, Vue is unaware of the change.

If you need v-model and also want to take an action anytime the value changes, listening for the @input event is the best option:

<v-select v-model="selected" @input="runme" :options="options"></v-select>

Answer 2

It was your handler on change event that suppresses the emitting of input event (which actually plays in the 2 ways binding of v-model ). You just need to listen to input instead:

<v-select v-model="selected" @input="runme" :options="options"></v-select>

Answer 3

Couple things here, first issue is with the runme method. By using function you are changing the context of this . To access the data property you should be using es6 arrow syntax:

  methods: {
    runme: () => {
      alert(this.selected);
    }
  }

Second, you really don't even need selected though, instead just pass the value as a parameter to runme .

Here is a working fiddle .

Updated your snippet

 Vue.component('v-select', VueSelect.VueSelect) new Vue({ el: '#app', data() { return { options: [{ value: 1, label: 'foo' }, { value: 3, label: 'bar' }, { value: 2, label: 'baz' }, ], } }, methods: { runme: selected => { alert(`label: ${selected.label} value: ${selected.value}`); } } }) 

 <script src="https://vuejs.org/js/vue.js"></script> <script src="https://unpkg.com/vue-select@2.4.0/dist/vue-select.js"></script> <div id="app"> <h1>Vue Select - Using v-model</h1> <v-select :on-change="runme" :options="options"></v-select> </div>