vue block other script event listeners 1

vue block other script event listeners

const app = new Vue({
    el: '#app',
    mounted() {
        $(document).trigger('vue-loaded');
    }
});
$(document).on('vue-loaded', function () {
    const $toggle = $('.js-accordion-toggle');

    $toggle.on('click', function () {
        $(this).toggleClass('test');
    });
});

Here is what the above code is Doing:
1. We’re creating a new Vue instance and attaching it to the #app element.
2. We’re using the mounted() method to trigger a custom event called vue-loaded.
3. We’re listening for the vue-loaded event and attaching a click event to the .js-accordion-toggle element.
4. When the .js-accordion-toggle element is clicked, we’re toggling the test class.

The problem with this approach is that we’re using jQuery to attach the click event to the .js-accordion-toggle element.

We can use Vue to attach the click event instead.

Here’s how we can do that:

Similar Posts