javascript - vuejs 方法在引导模式事件中不起作用

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

模态显示时显示错误

Uncaught TypeError: this.gtagFunction is not a function

如果我将 this.gtagFunction() 放在 $('#modalRecommend').on('shown.bs.modal', function (e) {..然后就可以了。

注意:我已在父组件中加载了一个 mixin，其中 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 不绑定(bind)到 Vue 实例，而是绑定(bind)到 jQuery 对象 $('#modalRecommend')。这就是为什么您无法访问 Vue 组件中定义的 gtagFunction 的原因。

由于您可以在 jQuery 调用之外调用该函数，因此您可以尝试像这样调用 gtagFunction:

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