CODEWITHSUNDEEP
javascriptjqueryvue.jsvuejs2semantic-ui
JeffProd
JeffProd

Reputation: 3148

Semantic-ui modal duplicated with VueJS

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 :

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.

Upvotes: 1

Views: 1379

Answers (1)

Daniel
Daniel

Reputation: 35684

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;

Upvotes: 2

Related Questions