为什么重新定位vue应用程序不起作用

发布于 2025-02-09 02:34:43 字数 659 浏览 1 评论 0 原文

我将VUE不是作为水疗中心,而是在页面上用作小部件。有一个弹出式插件(在VUE之外使用的jQuery插件)可以删除Vue应用程序的HTML,然后将其重新放回原处,以重新定位它。我想运行我的代码,该代码将在重新定位后重新启动VUE。我无法访问弹出插件,无法更改其工作方式。

我已经尝试了此代码来重新开始VUE应用程序:

function initializeApp() {
  app = new Vue({
    el: '#app'
    // other options. 
  }); 
}

// This function would run after popup has removed and added the HTML of vue app back.
function afterPopupOpen() {
  app.$destroy()
  initializeApp()
}

但它行不通。重新启动VUE应用程序后,单击处理程序似乎无法正常工作。

我创建了一个代码沙盒以演示相同的内容:

请注意,在单击重新点击按钮后,计数按钮停止工作。

I'm using Vue not as a SPA, but only as a widget on a page. There is a popup plugin (a jQuery plugin thats working outside of Vue) that deletes the Vue app's HTML and put it back again for the purpose of repositioning it. I want to run my code that would re-initiate the Vue after repositioning is done. I don't have access to the popup plugin and cannot change the way it works.

I have tried this code to reinitialize the Vue App:

function initializeApp() {
  app = new Vue({
    el: '#app'
    // other options. 
  }); 
}

// This function would run after popup has removed and added the HTML of vue app back.
function afterPopupOpen() {
  app.$destroy()
  initializeApp()
}

But it doesn't work. After re-initiating the Vue app click handlers don't seem to work.

I have created a code sandbox to demonstrate the same: https://codesandbox.io/s/vue-app-reinitialize-example-qcovs4?file=/index.html

Notice that the counter button stops working after the Re-initialise button is clicked.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文