VueJSは、クリックされたリストエントリのインデックスに基づいてモーダルで情報を表示します

ジャスティンハースト

私はvueJSを初めて使用し、進め方がわかりません。

名前と職位を含むオブジェクトの配列があります。これらのオブジェクトは、ボタン付きのリストとして表示されます。ユーザーがボタンをクリックすると、クリックされた人の名前とその仕事を表示するモーダルがポップアップ表示されます。

モーダルに正しい情報を表示させるにはどうすればよいですか?

<div id="modal">
  <h2 class="membername">Name: {{ members[0].name }}</h2>
  <p class="memberposition">Position: {{ members[0].position}}</p>
</div>

vuejs括弧内の「[0]」は、ユーザーがクリックした人のインデックスである必要があります。

http://codepen.io/leetzorr/pen/QGJozR

NikxDa

selectedMemberフィールドを作成し、IDを保存させます。次に、モーダルをそれに基づいて、selectedMemberフィールドのみを変更します。私はあなたのペンを更新しました:http//codepen.io/anon/pen/KNrYvz

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

指定されたインデックスに基づいてリスト内の要素をマージします

分類Dev

Splunkクエリは、同じインデックス内の他のイベントに基づいてフィルターで除外されます

分類Dev

最後にインデックス付けされた時間に基づいて、クエリ時にElasticSearchの結果をブーストします

分類Dev

APL言語の「Excel」テーブルによって提供される情報に基づいてバイナリマトリックスを作成します

分類Dev

ネストされたリストのインデックスに基づいて、ネストされたリストに要素を追加します

分類Dev

リストのインデックスに基づいて、リストをforループに分割します

分類Dev

デバッグ情報を表示せずに、prod構成へのシンボリックリンクに基づいてステージング環境をセットアップするにはどうすればよいですか?

分類Dev

指定された場所に基づいてマトリックスのエントリを選択します

分類Dev

マルチインデックスの一部に基づいてパンダシリーズのエントリを選択します

分類Dev

撮影した画像とスクリーンショット(またはデータモデルに基づいて生成された画像)の照合

分類Dev

woocomerceイベントに基づいて投稿リクエストが発行されるのはいつですか?また、デバッグできるようにphpコードをコンソールする方法を教えてください

分類Dev

タプル(値、インデックス)のリストに基づいてリストを作成します

分類Dev

pythonは別のリストに基づいてリストインデックスを削除します

分類Dev

表示されたデータテーブルの値に基づいてドロップダウンリストアイテムを無効にします

分類Dev

特定のインデックスに基づいてネストされたリストを再配置する方法

分類Dev

クリックされたボタンに基づいて、非表示の入力をモーダル形式で設定します

分類Dev

インデックスのベクトルに基づいてリストから要素を抽出します

分類Dev

Rでのトピックモデリング:事前定義された用語リストに基づいてトピックを構築する

分類Dev

チェックされたチェックボックスに基づいて1つ以上のコントロールを表示または非表示にするリストアイテム

分類Dev

GruntまたはNodeサーバーを使用してUser-Agent(モバイルおよびデスクトップ)に基づいてリクエスト/プロキシをリダイレクトする方法は?

分類Dev

マップ上にマーカーのみを表示できますが、マーカーのクリック時にデフォルトの情報ウィンドウまたはカスタム情報ウィンドウを表示しないようにするにはどうすればよいですか?

分類Dev

TensorFlow: インデックスのリストに基づいて新しいテンソルを作成します

分類Dev

インデックスに基づいて、ネストされたリストで連結した文字列

分類Dev

Rのリストで指定されたインデックスに基づいてベクトルの要素を抽出する

分類Dev

React Navigationを使用して、ネストされたスタックの画面に基づいて、外側のスタックヘッダーに戻るボタンをレンダリングするにはどうすればよいですか?

分類Dev

別のリストから指定されたインデックスに基づいて要素を交換する

分類Dev

クリックされたボタンに基づいてページにモーダルを表示する方法

分類Dev

クリックされたボタンに基づいてページにモーダルを表示する方法

分類Dev

特定のインデックスの値に基づいて、List <int []>からエントリを削除します

Related 関連記事

  1. 1

    指定されたインデックスに基づいてリスト内の要素をマージします

  2. 2

    Splunkクエリは、同じインデックス内の他のイベントに基づいてフィルターで除外されます

  3. 3

    最後にインデックス付けされた時間に基づいて、クエリ時にElasticSearchの結果をブーストします

  4. 4

    APL言語の「Excel」テーブルによって提供される情報に基づいてバイナリマトリックスを作成します

  5. 5

    ネストされたリストのインデックスに基づいて、ネストされたリストに要素を追加します

  6. 6

    リストのインデックスに基づいて、リストをforループに分割します

  7. 7

    デバッグ情報を表示せずに、prod構成へのシンボリックリンクに基づいてステージング環境をセットアップするにはどうすればよいですか?

  8. 8

    指定された場所に基づいてマトリックスのエントリを選択します

  9. 9

    マルチインデックスの一部に基づいてパンダシリーズのエントリを選択します

  10. 10

    撮影した画像とスクリーンショット(またはデータモデルに基づいて生成された画像)の照合

  11. 11

    woocomerceイベントに基づいて投稿リクエストが発行されるのはいつですか?また、デバッグできるようにphpコードをコンソールする方法を教えてください

  12. 12

    タプル(値、インデックス)のリストに基づいてリストを作成します

  13. 13

    pythonは別のリストに基づいてリストインデックスを削除します

  14. 14

    表示されたデータテーブルの値に基づいてドロップダウンリストアイテムを無効にします

  15. 15

    特定のインデックスに基づいてネストされたリストを再配置する方法

  16. 16

    クリックされたボタンに基づいて、非表示の入力をモーダル形式で設定します

  17. 17

    インデックスのベクトルに基づいてリストから要素を抽出します

  18. 18

    Rでのトピックモデリング:事前定義された用語リストに基づいてトピックを構築する

  19. 19

    チェックされたチェックボックスに基づいて1つ以上のコントロールを表示または非表示にするリストアイテム

  20. 20

    GruntまたはNodeサーバーを使用してUser-Agent(モバイルおよびデスクトップ)に基づいてリクエスト/プロキシをリダイレクトする方法は?

  21. 21

    マップ上にマーカーのみを表示できますが、マーカーのクリック時にデフォルトの情報ウィンドウまたはカスタム情報ウィンドウを表示しないようにするにはどうすればよいですか?

  22. 22

    TensorFlow: インデックスのリストに基づいて新しいテンソルを作成します

  23. 23

    インデックスに基づいて、ネストされたリストで連結した文字列

  24. 24

    Rのリストで指定されたインデックスに基づいてベクトルの要素を抽出する

  25. 25

    React Navigationを使用して、ネストされたスタックの画面に基づいて、外側のスタックヘッダーに戻るボタンをレンダリングするにはどうすればよいですか?

  26. 26

    別のリストから指定されたインデックスに基づいて要素を交換する

  27. 27

    クリックされたボタンに基づいてページにモーダルを表示する方法

  28. 28

    クリックされたボタンに基づいてページにモーダルを表示する方法

  29. 29

    特定のインデックスの値に基づいて、List <int []>からエントリを削除します

ホットタグ

アーカイブ