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

Question

所以我使用 jQuery 制作了 Accordion /标签，我在 li 元素上使用 jquery .click 方法来翻页/标签。 现在我想集成 Vue.js 以在 Accordion 页面上显示我从 jquery 获得的 JSON 数据。 但是当我在 Accordion 上添加 .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');
    });
});

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

根据您的情况，您可能需要添加 $nextTick 以确保所有内容都已呈现 (https://v2.vuejs.org/v2/api/#mounted)

mounted () {
    this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been rendered
   })
}