Vue.js移除jQuery事件处理程序

Question

因此，我使用jQuery制作了一个手风琴/制表符，我在li元素上使用jQuery.click方法来转换页面/制表符。现在，我希望集成Vue.js，以便在手风琴页面上显示从jquery获得的JSON数据。但是，当我在手风琴和.vue上添加el: '.vue'类时，jQuery.click事件根本不会触发，现在选项卡不会翻页。

也许我不应该在Jquery中使用Vue，但是我发现jQuery更容易完成简单的任务，比如在制表符之间切换。

PS:我对Vue很陌生

Answer 1

事件处理程序丢失，因为Vue替换了它们绑定到的元素。您可以使用$.holdReady延迟$(document).ready，直到组件被挂载。

$.holdReady(true)

document.addEventListener("DOMContentLoaded", () => {
  new Vue({
    el: "#app-body",
    mounted() {
      $.holdReady(false)
    }
  })
});

Answer 2

在处理一个大型项目时，我也遇到了同样的问题，该项目有大量现有的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
   })
}

Answer 3

这是因为单击事件在VUE组件之前加载。您正在初始化不存在的hmtl上的单击事件。

​

$(document).on('click', '.classname', function(){
 //do action
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​