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

Question

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

Vue选择

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

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

Answer 1

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

快速查看其源代码显示该组件有一个onChange 属性，当所选值更改时调用该属性并默认发出输入事件。

您可以简单地将您的附加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>