bugfix> javascript > 投稿

複数のVue.jsコンポーネントがあるとします。

<loginFields></loginFields>
<submitButton></submitButton>

さて、submitButton(実際には一意のidを持つdiv)をクリックした後、loginFieldsの値をチェックするためのメソッドを開始したいと思います。 コンポーネントloginFieldsには、ユーザー名やパスワードなどの複数の入力フィールドを作成するv-forディレクティブが含まれています。 私が達成したいのは、ユーザーloginFieldとパスワードloginFieldの値を取得し、submitFieldからメソッドに渡すことです。 jQueryを使えば簡単です-$( '#userLoginField')。val()を呼び出すと完了です。 私はvueでそれを行うには2つの方法があると信じていますが、どちらも最善のアプローチではないと思います:

  1. バスを作成し、submitButtonをクリックすると、すべての入力フィールドの値でsubmitButtonに最終的に戻るイベントのカスケードを開始するイベントを発行します。かなり面倒だと思います。

  2. submitFieldのthis。$parent。$refsを呼び出し、inputFieldsコンポーネントの参照を取得し、他のすべての参照を検索して値を取得します。面倒です。

同じ親または兄弟の他の子供からデータを簡単に取得するためのjQueryバージョンのような簡潔でクリーンなソリューションはありますか?各兄弟は一意のIDを持ち、同じ/異なるクラスの一部であるため、簡単に識別できます。

カレグ

回答 1 件
  • 最も簡単な方法(つまり、「Vue配線」の最小量)は、ネイティブ形式の submit を使用することだと思います -イベント。フォームの要素( <login-fields> の子を含む) ) event.target.elements で 。ザ・ submit -イベントハンドラは、必要に応じてこれらの要素の値を検証できます。

    // in <login-form>
    methods: {
      submit(e) {
        // Get elements that have a "name" attr
        const elems = Array.from(e.target.elements).filter(el => el.name);
        // Create dictionary of those elements' values
        const values = elems.reduce((p,c) => {
          p[c.name] = c.value;
          return p;
        }, {});
        if (this.validate(values)) {
          // submit form
        } else {
          // don't submit...show error
          e.preventDefault();
        }
      }
    }
    
    

    デモ

あなたの答え