Semantic-ui 模态与 VueJS 复制

Question

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

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

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

<div id="myModal ...>

因此，最后此模态的内容是错误的，并且不是预期的，因为更改是在最后一个模态(冲突 id(中。但无论如何，复制模态代码是错误的。

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

要重现该错误：

• 点击"打开模态"，你会看到名称"A">
点击"更改名称
• "，打开模态，名称已更改(只需附加"X"(，这没关系。如果需要，可以重复。
• 点击"更改页面"，您转到第 2 页，再次单击转到第 1 页
• "更改名称"现在对模态内容没有影响。

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

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

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

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

Answer 1

正如评论中提到的，vue 和 jquery 之间存在冲突

Vue 使用影子 dom 根据需要添加和删除项目

jQuery 始终依赖于 DOM 中剩余的项。

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

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

这是工作小提琴

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

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

通过在 Vue 中跟踪它来维护圆顶的范围。在这里，我们将对 jQuery 模态对象的引用分配给 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;