与VueJS

Question

复制语义的UI模式，我发现ONT计算器2个类似的问题，但它并没有帮助。

我使用VueJS和语义的UI模式。

根据每次我所说的“表演模式”的方法我结构的代码，一个新的模式被添加到源页面相同的ID：

<div id="myModal ...> 

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

所以我做了的jsfiddle是明确的：https://jsfiddle.net/3ut5d9uu/5/

重现bug：

• 点击 “打开模式”，你所看到的名称 “A”
• 点击“更改名称“，打开模式，名称已更改（只需追加”x“），这没关系。如果你愿意，你可以重复。
• 点击“更改页面”，您转到第2页，再次点击转到第1页
• “更改名称”现在对模态内容没有影响。

帮助调试：

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

所以我们：我可以在我的研究与开发的浏览器，每次“openModal”之称，全码处的DOM末尾加上永不删除看有几个相同的ID“myModal”。

但我could'nt解决这个问题。 感谢您的帮助。

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;