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

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>

Answer 3

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>