语义-ui 模态与 VueJS 重复

Question

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

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

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

<div id="myModal ...>

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

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

重现错误：

帮助调试：我可以在我的开发浏览器中看到每次调用 "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 的内容，但有一种方法可以解决这个问题。

这是工作 fiddle

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

通过在 vue 中跟踪它来维护 dome 的范围。这里我们将对 jQuery 模态对象的引用分配给视图数据对象

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

您还需要将 modalDom 添加到数据

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

然后将其用于 show/hide 模态

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

瞧，Bob = yourUncle；

Semantic-ui modal duplicated with VueJS