Как добавить слушателя в vue-multiselect после загрузки страницы?

Question

Мне нужно добавить слушателя в Vue-Multiselect, как это (но это не работает):

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

Он должен быть добавлен в обновленный хук.

Я много чего перепробовал, но из-за природы vue-multiselect обычный jQuery не работает, т. Е. Вы не можете прослушать изменения в multiselect__input потому что его значение на самом деле не меняется.

Есть .multiselect__single элемент, который добавляется \ удаляется в зависимости от состояния, но я бы предпочел не слушать \ проверять изменения html.

Answer 1

vue-multiselect события не включают 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>