简体   繁体   English

如何从引导选择侦听器调用 vue 方法?

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

I have a vue with vuex reactive auto-saving app, and I'm using bootstrap-select as one of the fields to try to autosave.我有一个带有 vuex 反应式自动保存应用程序的 vue,并且我使用bootstrap-select作为尝试自动保存的字段之一。

I declare the bootstrap-select listener in the vue component's mounted() lifecycle hook like so:我在 vue 组件的 mount() 生命周期钩子中声明了 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()); 
}

I declare it in the mounted hook as this is how I got it to work best... but now I want to try to $emit a function to the parent vue component when a selection changes on the bootstrap-select so I need to somehow access the this object in the bootstrap-select listener to call the $emit up the chain to eventually save the selection change.我在挂载的钩子中声明它,因为这是我让它工作得最好的方式......但现在我想尝试在 bootstrap-select 上的选择更改时向父 vue 组件$emit a function 所以我需要以某种方式在 bootstrap-select 侦听器中访问this object 以调用 $emit 以最终保存选择更改。

I could be missing something but I feel like the problem is getting the this object into the selectpicker listener scope?我可能会遗漏一些东西,但我觉得问题是让this object 进入选择器侦听器 scope?

Appreciate any and all advice:!感谢任何和所有的建议:! thanks :)谢谢 :)

Use arrow function which solve this problem.使用箭头 function 来解决this问题。

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

To learn more about this you can read this.要了解有关this内容的更多信息,您可以阅读此内容。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM