1

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

Reo93
  • 209
  • 1
  • 5
  • 16

1 Answers1

9

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/vue-select@2.4.0/dist/vue-select.js"></script>
<script src="https://unpkg.com/vue@2.5.16/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>
Ricardo Tavares
  • 156
  • 1
  • 5
  • 1
    If the event is just to rewrite a Vue.data variable (in example `this.selected`), then `v-model` is quicker [https://vue-select.org/guide/values.html#getting-and-setting](https://vue-select.org/guide/values.html#getting-and-setting) – Xopi García Dec 04 '20 at 18:36