如何在页面加载后将侦听器添加到vue-multiselect中？

Question

我需要在vue-multiselect中添加一个侦听器，如下所示(但这不起作用)

$('.multiselect').change(console.log("multiselect changed"));

它必须添加到已更新钩子中。

我尝试了很多东西，但是由于vue-multiselect的性质，传统的jQuery不能工作，你不能监听multiselect__input上的更改，因为它的值实际上没有变化。

有一个根据状态添加\删除的.multiselect__single元素，但我不希望侦听\测试html的更改。

Answer 1

事件不包括change，但您可能正在查找input (在value更改后发出)或searchChanged (在搜索查询更改后发出)。

倾听某一事件的惯用方法是使用以下语法：@EVENTNAME="METHOD"。示例：

<multiselect @input="onSelection">

​

new Vue({
  el: '#app',
  components: {
    Multiselect: window.VueMultiselect.default
    },
  data() {
    return {
      value: '',
      options: ['list', 'of', 'options']
    };
  },
  methods: {
    onSelection(newValue) {
      console.log({newValue})
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

<div id="app">
  <multiselect :options="options" v-model="value" @input="onSelection"></multiselect>
  <div>value: {{value}}</div>
</div>

​