vuejs方法在引导模态事件中不起作用

Question

我在vuejs应用程序中有引导(4.3)模式。在模态显示，我想发送gtag (谷歌分析)数据。我试过了

async created() {
//some other code
 $('#modalRecommend').on('shown.bs.modal', function (e) {
    this.gtagFunction('pressed', 'my cat','test label','no');
    $('body').addClass('modal-recommend-open');
  }).on('hidden.bs.modal', function (e) {
    $('body').removeClass('modal-recommend-open');
  });
 }

当模态显示时，它正在显示错误。

Uncaught : this.gtagFunction不是函数

如果我把this.gtagFunction()放在$('#modalRecommend').on('shown.bs.modal', function (e) {..之外，那么它就是works。

注意:我已经在可用this.gtagFunction()的父组件中加载了一个混合器。此外，我还尝试在HTML中添加@click.native

<img @click.native="sendAnalytics()" class="w-auto mr-2" src="/pic.png" width="120" height="40" v show="recommendRankingWorks.length > 0" data-toggle="modal" data-target="#modalRecommend" style="cursor:pointer;"/>

使用

methods{
sendAnalytics: function(){
            this.gtagFunction('pressed', 'my cat','test label','no');
        },
}

但没有被解雇。只显示模态

Answer 1

当你打电话的时候

$('#modalRecommend').on('shown.bs.modal', function (e) {
    this.gtagFunction('pressed', 'my cat','test label','no');

this不是绑定到Vue实例，而是绑定到jQuery对象$('#modalRecommend')。这就是为什么不能访问Vue组件中定义的gtagFunction的原因。

由于您可以在jQuery调用之外调用函数，所以可以尝试像这样调用gtagFunction：

const { gtagFunction } = this;
$('#modalRecommend').on('shown.bs.modal', function (e) {
    gtagFunction('pressed', 'my cat','test label','no');