如何在 v-select 上创建点击事件？

Question

我正在使用 vue-select，当我 select 来自 select 列表的项目时，我想创建一个点击事件。我尝试使用 @change="changedValue" @selected="changedLabel" 但这对我不起作用。

Vue select

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

有谁知道如何触发事件？谢谢

Answer 1

由于您没有为您正在使用的组件库提供 link，我假设您正在使用 vue-select。

通过其源代码快速查看会发现该组件有一个 onChange prop，当所选值更改时调用该组件，默认情况下会发出输入事件。

您只需将 changedLabel 附加到 @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>

如何在 v-select 上创建点击事件？

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

javascript

vue.js

vuejs2

vue-select