Semantic-ui 模态与 VueJS 重复

Posted 2023-02-22

【中文标题】Semantic-ui 模态与 VueJS 重复

【英文标题】：Semantic-ui modal duplicated with VueJS

【发布时间】：2018-01-21 10:37:51

【问题描述】：

我在 *** 上发现了 2 个类似的问题，但没有帮助。

我正在使用 VueJS 和语义 UI 模态。

根据我的代码结构，每次调用“show modal”方法时，都会在源页面中添加一个具有相同id的新modal：

<div id="myModal ...>

所以最后这个模态的内容是错误的并且不是预期的，因为变化是在最后一个模态中（冲突 id）。但无论如何复制模态代码是错误的。

所以我做了一个 jsfiddle 来明确：https://jsfiddle.net/3ut5d9uu/5/

重现错误：

点击“open modal”，你会看到名字“a” 点击“更改名称”，打开模态，名称已更改（只是附加“x”），这样就可以了。您可以根据需要重复。 点击“换页”，进入第2页，再次点击进入第1页 “更改名称”现在对模态内容无效。

帮助调试：我可以在我的开发浏览器中看到，每次调用“openModal”时，都会在 DOM 的末尾添加一个完整的代码并且永远不会删除：

<div class="ui dimmer modals page inverted transition hidden">
<div id="myModal"...

所以我们有几个相同的 id “myModal”。

但我无法解决这个问题。 感谢您的帮助。

【问题讨论】：

我看到你正在混合 jquery 和 vue。虽然这是可能的，但不建议这样做，因为您会得到这些意想不到的结果。 Vue 以数据为中心，jquery 以 dom 为中心。您应该能够使用 vue 来替换 jquery 功能，但是如果您使用具有 jquery 依赖项的 css/js 框架，这会变得有点棘手，这就是为什么有许多框架的 vue 特定版本

【参考方案1】：

评论中提到，vue和jquery有冲突

Vue 使用 shadow dom 来根据需要添加和删除项目

jQuery 一直依赖于 DOM 中剩余的项目。

当您从一个页面转到另一个页面时，就会发生这种冲突。

虽然我强烈建议删除 jquery，以支持 https://github.com/almino/semantic-ui-vue2 之类的东西，但有一种方法可以解决这个问题。

这是工作小提琴

https://jsfiddle.net/3ut5d9uu/6/

这是通过几个关键的事情来完成的，

通过在 vue 中跟踪来维护圆顶的范围。这里我们将 jQuery modal 对象的引用分配给一个 vuew 数据对象

,mounted: function () 
    this.modalDom = $('#myModal').modal( inverted: true, closable: false );

您还需要将modalDom 添加到数据中

let dataPage1 = 
    name: 'a',
  modalDom: null
;

然后用它来显示/隐藏模态

  openModal: function() 
        this.modalDom.modal('show');
  ,
  closeModal: function() 
        this.modalDom.modal('hide');
  ,

瞧，Bob = yourUncle;

【讨论】：

这很接近，但没有解决他不断向 DOM 添加模式的问题。通常在beforeDestroy 中，您将销毁 jQuery 创建的项目。我修改了小提琴to do so here。