Not able to triger any event on vue-select

Question

I am working on vue-select to input / select from dropdown, so on select of any option I am trying to get the value which is selected

Code

<vueSelect 
       :clearable="false"
       v-on:change="itemCodeChange($event)"
       :options="itemCode">
</vueSelect>

script

    import vueSelect from 'vue-select'
    import 'vue-select/dist/vue-select.css';
    components :{
        vueSelect,

    },
  data () {
     return {
        itemCode:[],
     }      
  },
   methods:{
  itemCodeChange (a)
      {
          alert(a)
      }

When I am changing nothing is happening

Answer 1

You need to use the input event not the change event: see working code

 Vue.component('v-select', VueSelect.VueSelect) new Vue({ el: '#app', data: { options: [ 'foo', 'bar', 'baz' ] }, methods: { changed(v) { console.log(v); } } })

 @import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:600'; @import 'https://unpkg.com/vue-select/dist/vue-select.css'; 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; }

 <div id="app"> <h1>Vue Select</h1> <v-select :options="options" @input="changed"></v-select> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script> <script src="https://unpkg.com/vue-select@latest"></script>