javascript - 与 VueJS 重复的语义 ui 模式

Question

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

我正在使用 VueJS 和语义用户界面模式。

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

<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"...

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

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

Answer 1

如评论中所述，vue 和 jquery 之间存在冲突

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

jQuery 始终依赖于保留在 DOM 中的项目。

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

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

这是工作 fiddle

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；