How can i make a click event on v-select?

Question

I am using vue-select and I wanna make a click event when i select a item from the select list. I tried with @change="changedValue" @selected="changedLabel" but that does not works for me.

Vue select

<v-select placeholder="Add administrator" class="form-control-select" label="displayName" :options="items"></v-select>

Does anyone know how to trigger an event? Thanks

Answer 1

Since you did not provide a link to the component library you are using I'll assume you are using vue-select.

A quick look trough its source shows the component has an onChange prop which is called when the selected value changes and defaults to emitting the input event.

You can simply attach your changedLabel to @input:

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    items: [      
      'foo',
      'bar'
    ],
    selected: null
  },
  methods: {
    changedLabel(event) {
      this.selected = event;
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue-select.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <v-select 
    placeholder="Add administrator" 
    class="form-control-select" 
    label="displayName" 
    :options="items"
    @input="changedLabel"
  ></v-select> 
  
  <span>{{ selected }}</span>
</div>