Vue.js 移除了 jQuery 事件处理程序 [英] Vue.js removes jQuery event handlers

问题描述

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

So i have made an accordion/tabs using jQuery, i use jquery .click method on li elements to turn pages/tabs. Now i wanted to integrate Vue.js to display the JSON data i got from jquery on the accordion pages. But when i add .vue class on the accordion and el: '.vue', the jquery .click events do not trigger at all, now the tabs wont turn pages.

也许我不应该在 Jquery 中使用 Vue，但我发现 jQuery 更容易完成一个简单的任务，比如在选项卡之间切换.

Maybe i shouldn't use Vue with Jquery, but i find jQuery is easier to do a simple task like switching between tabs.

PS:我是 Vue 的新手

PS: im new to Vue

推荐答案

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

The event handlers are lost because Vue replaces the elements that they're bound to. You can use $.holdReady to delay the $(document).ready until the component is mounted.

$.holdReady(true)

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

这篇关于Vue.js 移除了 jQuery 事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！