vuejs method not working inside bootstrap modal event

Question

I have bootstrap (4.3) modal in vuejs app. On modal show I want to send gtag (google analytics) data. I have tried

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

When modal show it is showing error

Uncaught TypeError: this.gtagFunction is not a function

If I place this.gtagFunction() this outside $('#modalRecommend').on('shown.bs.modal', function (e) {.. then it is works.

Note: I have loaded a mixins in parent component where this.gtagFunction() is available. Also I have tried to add @click.native in HTML like

<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;"/>

with

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

but not fired. Only show modal

u can replace function to arrow function. E.g. function() {} to () => {} — Vernon Jian Hao
– Vernon Jian Hao, Commented Mar 21, 2019 at 9:13

blaz · Accepted Answer · 2019-03-21 09:07:21Z

2

When you called

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

this is not bounded to Vue instance, but to the jQuery object $('#modalRecommend'). That's why you cannot access gtagFunction defined in your Vue component.

Since you can call the function outside of jQuery call, you can try to call gtagFunction like this:

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

answered Mar 21, 2019 at 9:07

blaz

4,07825 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rejoanul Alam Over a year ago

I have just use let self = this;self.gtagFunction('pressed', 'my cat','test label','no'); and now working. Perhaps your solution will also will work. I have got the idea from your answer. Thanks

Collectives™ on Stack Overflow

vuejs method not working inside bootstrap modal event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related