'jQuery not working in vue component when change route

I have an issue with jQuery script files is not working inside vue component but it working outside it, I found a solution to put all script files in script section inside vue component, but I'am using this code for every page. Note : The jQuery files run the first time the component is loaded, but the problem appears when changing to another route using the vue-router.

Any solution for that issue ?

jquerylaravelvue.jsvue-componentvue-router


Solution 1:[1]

Can you write an example usage area. When this happens to me, I usually solve it by using a short setTimeOut in the mounted area of the app.vue file. But I have to see your example. For example;

 methods: {
      
        jqueryFunction: function () {
            //your jquery codes
        },

    },

mounted() {
        setTimeout(function (evt) {
            this.jqueryFunction();
        }.bind(this), 3000);
    },

Solution 2:[2]

Just use dynamic event binding instead of your method. use:

$('body').on('click', '.your-element', function (e) {
    ...
});

instead of:

$('body').on('click', function (e) {
    ...
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kaan
Solution 2 Ali H

Related Questions