複数のVue.jsコンポーネントがあるとします。
<loginFields></loginFields>
<submitButton></submitButton>
さて、submitButton(実際には一意のidを持つdiv)をクリックした後、loginFieldsの値をチェックするためのメソッドを開始したいと思います。 コンポーネントloginFieldsには、ユーザー名やパスワードなどの複数の入力フィールドを作成するv-forディレクティブが含まれています。 私が達成したいのは、ユーザーloginFieldとパスワードloginFieldの値を取得し、submitFieldからメソッドに渡すことです。 jQueryを使えば簡単です-$( '#userLoginField')。val()を呼び出すと完了です。 私はvueでそれを行うには2つの方法があると信じていますが、どちらも最善のアプローチではないと思います:
バスを作成し、submitButtonをクリックすると、すべての入力フィールドの値でsubmitButtonに最終的に戻るイベントのカスケードを開始するイベントを発行します。かなり面倒だと思います。
submitFieldのthis。$parent。$refsを呼び出し、inputFieldsコンポーネントの参照を取得し、他のすべての参照を検索して値を取得します。面倒です。
同じ親または兄弟の他の子供からデータを簡単に取得するためのjQueryバージョンのような簡潔でクリーンなソリューションはありますか?各兄弟は一意のIDを持ち、同じ/異なるクラスの一部であるため、簡単に識別できます。
カレグ
関連した質問
- Vuejs内からのLaravel8でのAJAXPOSTリクエストが405(メソッドはサポートされていません)エラーをスローするのはなぜですか?
- Webの要素が突然消える
- フィルタ付きのVueテンプレートで三項演算子を使用するにはどうすればよいですか?
- 'getElementById'を使用してボタンの背景を変更する
- 特殊文字(&)を使用したjQueryメソッドfind()
- JavaScriptでJSONオブジェクトをループする
- 現在のCSSグリッドレイアウトでコーナーアイテムを取得し、ホバーで展開します
- each()のjQuery問題と、ul要素とli要素のprepend関数
- JS追加要素
- Vue:コンポーネントにCSSファイルとJSファイルをロードするにはどうすればよいですか?
最も簡単な方法(つまり、「Vue配線」の最小量)は、ネイティブ形式の
submit
を使用することだと思います -イベント。フォームの要素(<login-fields>
の子を含む) )event.target.elements
で 。ザ・submit
-イベントハンドラは、必要に応じてこれらの要素の値を検証できます。デモ