页面加载后如何向 vue-multiselect 添加监听器？答案

【问题标题】：How to add a listener to a vue-multiselect after the page has loaded?页面加载后如何向 vue-multiselect 添加监听器？
【发布时间】：2018-09-20 12:22:51
【问题描述】：

我需要为 vue-multiselect 添加一个监听器，像这样 （但这不起作用）：

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

必须在updated钩子中添加。

我尝试了很多东西，但是由于 vue-multiselect 的性质，传统的 jQuery 不起作用'实际上并没有改变。

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

【问题讨论】：

标签： vue.js vuejs2 vue-multiselect

【解决方案1】：

vue-multiselect events 不包括change，但您可能正在寻找input（在value 更改后发出）或searchChanged（在搜索查询更改后发出）。

listen to an event 的惯用方式是使用以下语法：@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>

【讨论】：

页面加载后我该怎么做？
您不必担心设置事件监听器的时间，因为 Vue 在解析模板时会设置事件监听器。你能澄清为什么这是一个问题吗？
我正在尝试强制 vue-multiselect 切换到下一个 tabindex（它现在不这样做）并且我无法将 @input 添加到每个多选元素（将无法强制执行)。所以我需要从updated 函数的中心位置添加一个监听器。我的意思是这就是整个问题的重点。我知道@select 和@input，是的，这就是我需要的，但是在页面加载之后，每次更新都会被调用。
听起来像XY problem。
我想你不明白我的问题是什么。还是谢谢。