Semantic-ui modal duplicated with VueJS

Question

I found 2 similar questions ont stackoverflow, but it didn't help.

I'm using VueJS and semantic-ui modal.

According to my structure of code, each time i call the "show modal" method, a new modal is added to the source page with the same id :

<div id="myModal ...>

So finally the content of this modal is wrong and not expected because the changes are in the last modal (conflict id). But anyway duplicating the modal code is wrong.

So i made a jsfiddle to be clear : https://jsfiddle.net/3ut5d9uu/5/

To reproduce the bug :

• click on "open modal", you see the name "a"
• click on "change name", open modal, the name has changed (just appending "x"), this is ok. You can repeat if you want.
• click on "change page", you go to page 2, click again to go to page 1
• "change name" has now no effect in the modal content.

Help to debug : i can see in my developement browser that each time "openModal" is called, a full code is added at the end at the DOM and never removed :

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

So we have several same ids "myModal".

But i could'nt fix that. Thanks for your help.

Answer 1

As mentioned in the comment, there's a conflict between vue and jquery

Vue uses a shadow dom that adds and removes items as needed

jQuery relies on the item remaining in the DOM the entire time.

this conflict happens when you go from one page to another.

While I would strongly recommend removing jquery, in favour of something like https://github.com/almino/semantic-ui-vue2 , there is a way to handle this.

here is the working fiddle

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

this is done through a couple key things,

maintaining scope of dome by tracking it within vue. Here we assign reference to the jQuery modal object to a vuew data object

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

you will also need to add modalDom to data

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

and then use that to show/hide modal

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

voilà, Bob = yourUncle ;