Semantic-ui模态与VueJS重复

Question

我在stackoverflow上发现了两个类似的问题，但它没有帮助。

我正在使用VueJS和semantic-ui模态。

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

<div id="myModal ...>

所以最后这个模态的内容是错误的而不是预期的，因为更改是在最后一个模态（冲突ID）中。但无论如何重复模态代码是错误的。

所以我做了一个明确的问题：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');
  },

voilà，Bob = yourUncle;