Question

我在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');
        },
}

但不被解雇。只显示模态

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');

vuejs方法在引导模式事件内不起作用

1 个答案: