私は2つの同様の質問ont stackoverflowを見つけましたが、それは助けになりませんでした。VueJSで複製された意味論的モーダル
私は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"を持っています。
しかし、私はそれを修正できませんでした。 ご協力いただきありがとうございます。
jqueryとvueが混在しています。これは可能ですが、このような予期しない結果が生じるため、お勧めしません。 Vueはデータ中心ですが、jqueryはdom中心です。 vquを使ってjqueryの機能を置き換えることができるはずですが、jqueryの依存関係を持つcss/jsフレームワークを使用している場合、これはやや難しくなります。そのため、多くのフレームワークのvue固有のバージョンがあります – Daniel