如何从 bootstrap-select 侦听器调用 vue 方法？

Question

我有一个带有 vuex 反应式自动保存应用程序的 vue，我正在使用 bootstrap-select 作为尝试自动保存的字段之一。

我在 vue 组件的 mounted() 生命周期挂钩中声明 bootstrap-select 侦听器，如下所示：

mounted() {  //vue mounted hook
    const selectpicker = $(this.$el).find('.selectpicker')

    selectpicker.selectpicker('val', this.selected);  //this shows previously saved 'selected' items

    function callback() {
      this.callVueComponentMethod()  //throws 'this.* is not a function'
    }

    selectpicker.selectpicker().on('changed.bs.select', callback()); 
}

我在 mounted 钩子中声明它，因为这是我让它工作得最好的方式......但现在我想尝试 $emit 一个函数到父 vue 组件，当 selection 在 bootstrap-select 上发生变化，所以我需要以某种方式访问 bootstrap-select 侦听器中的 this 对象以调用 $emit链最终保存 selection 变化。

我可能遗漏了一些东西，但我觉得问题在于将 this 对象放入 selectpicker 侦听器范围？

感谢所有建议！！谢谢:)

Answer 1

使用箭头函数解决 this 问题。

let callback = () => {
  this.callVueComponentMethod();
}

要了解有关 this 的更多信息，您可以 read 这个。

如何从 bootstrap-select 侦听器调用 vue 方法？

How to call a vue method from bootstrap-select listener?

javascript

vue.js

bootstrap-4

scope

bootstrap-select