Vue の同じコンポーネント内の複数のモーダル ボックスをプログラムでレンダリングする

Question

<p>私のコンポーネントには、異なるコンテンツを持つ 3 つのポップアップ モーダルがあります。特定のボタンをクリックして、対応するポップアップ モーダルを開く必要があります。 </p> <p>これが私がやっていることです <strong>ボタン 1 の場合 -</strong></p> <pre class="brush:php;toolbar:false;"><s-button type="button" class="bl_btn" @click="onClickProdOpen"> 製品詳細 </s-button></pre> <p><strong>このモーダルの場合、1 は </strong></p> になります。 <pre class="brush:php;toolbar:false;"><s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')" <私のコンポーネント-1 :pageId ="this.$options.name" :popupDefaultTab="ポップアップオープンデフォルトタブ" :onClickClose="onClickclose" /> <p><strong>ここではボタンのクリック方法を説明します。このように、複数の異なるモーダル ボックスのクリック イベント。 </strong></p> <pre class="brush:php;toolbar:false;">メソッド: { onClickProdOpen() { this.isShowPopup1 = true; this.popupOpenDefaultTab = 0; } }</pre> <p><s-modal はカスタム モーダル ボックス パーツであり、内容は異なります。そこで、このモーダル コードを繰り返し、コンテンツを変更するだけです。つまり、異なる子コンポーネント (MyComponentOne、MyComponentTwo...) を渡しました。 </p> <p>それでは、switch case ステートメントを使用して、モーダル ボックス コードを複数回繰り返すことを避け、内部コンテンツ コンポーネントのみを変更するにはどうすればよいでしょうか?あらゆる提案が役に立ちます。 </p>

Answer 1

オプションの 1 つは、各モーダルの状態をオブジェクトに入れることです。この方法では、各モーダルにデータ属性を追加する必要がありません。

モーダル内のコンテンツが十分に類似している場合は、同じ方法でインデックスをキーとして使用して v-for を使用できます。

リーリー リーリー

https://codepen.io/timfranklin/pen/abWEwLy?editors=1111