Vue.js删除了jQuery事件处理程序

Question

所以我使用jQuery制作了一个手风琴/标签,我.click在li元素上使用jquery 方法来翻页/标签.现在我想集成Vue.js来显示我在手风琴页面上从jquery获得的JSON数据.但是当我.vue在手风琴上添加类时el: '.vue',jquery .click事件根本不会触发,现在标签不会翻页.

也许我不应该使用Vue与Jquery,但我发现jQuery更容易做一个简单的任务,如在标签之间切换.

PS:我是Vue的新手

Answer 1

我在处理一个大型项目时遇到了同样的问题,该项目有一堆现有的jQuery代码,我们希望切换到Vue.JS,而不必一次性重构所有代码.

如果您正在使用像webpack这样的模块构建器,并且您无法保证导入的顺序,则可以执行以下操作:

挂载根应用程序后,在文档上广播自定义事件:

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

然后将所有jQuery代码包装在自定义事件的事件侦听器中:

$(document).on('vue-loaded', function () {
    const $toggle = $('.js-accordion-toggle');

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

这在一个大型应用程序中对我有用