javascript - vue.js方法在引导模式事件内不起作用

我在vuejs应用程序中具有bootstrap（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');
  });
 }

模态显示时显示错误


  未捕获的TypeError：this.gtagFunction不是函数


如果我将this.gtagFunction()放置在$('#modalRecommend').on('shown.bs.modal', function (e) {..之外，则可以使用。

注意：我已经在this.gtagFunction()可用的父组件中加载了mixins。我也试图在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');
        },
}

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

最佳答案

当你打电话

$('#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');