VueJSで複製された意味論的モーダル

Question

私は2つの同様の質問ont stackoverflowを見つけましたが、それは助けになりませんでした。

私はVueJSとsemantic-ui modalを使用しています。コードの私の構成によれば、私は「ショーのモーダル」メソッドを呼び出すたびに、新しいモーダルは、同じIDを持つソースページに追加され

：

<div id="myModal ...> 

だから、最終的にはこのモーダルの内容変更が最後のモーダル（競合ID）にあるため、間違っており、予想されません。しかし、とにかくモーダルコードを複製するのは間違いです。

ので、私は明確にするjsfiddleをした：https://jsfiddle.net/3ut5d9uu/5/

バグ再現するには：「オープンモーダル」に

• クリックし、あなたが変更」上「」
• クリックして名前を参照してください名前が変わっていて、名前が変更されています（ "x"を追加しています）。これは大丈夫です。あなたが望むなら、あなたは繰り返すことができます。
• 「ページを変更」をクリックすると2ページ目に戻り、もう一度クリックすると1ページ目に移動します
• 「変更名」はモーダルコンテンツには影響しません。デバッグへ

ヘルプ：

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

だから、私は毎回「openModal」は、完全なコードは、DOMの最後に追加、削除されることはありませんと呼ばれる私の開発効率向上のブラウザで見ることができますいくつかの同じids "myModal"を持っています。

しかし、私はそれを修正できませんでした。 ご協力いただきありがとうございます。

Answer 1

コメントで述べたように、Vueのは、必要な

jQueryのDOMで全体の時間を、残りの項目に依存しているなどの項目を追加し、削除するシャドウDOMを使用しVUEとjQuery

との間に矛盾があります。

この矛盾は、あるページから別のページに移動したときに発生します。

jqueryを削除することを強く推奨しますが、https://github.com/almino/semantic-ui-vue2のようなものがありますが、これを処理する方法があります。ここ

はVUEの中でそれを追跡することによってドームの範囲を維持し、作業フィドル

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

これはカップルのキーのものを介して行われ、

です。ここでは、/表示するために

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

あなたはまた、データ

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

にmodalDomを追加し、それを使用する必要がありますvuewデータオブジェクトにjQueryのモーダルオブジェクトへの参照を代入モーダル隠す

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

voilà、Bob = yourUncle;