異なるコンポーネントの1つのコンポーネントからdivを見つける方法：vuejs

bugfix> javascript > 投稿 2020-08-22 16:56

複数の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を持ち、同じ/異なるクラスの一部であるため、簡単に識別できます。

カレグ

// 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();
    }
  }
}

デモ

bugfix

異なるコンポーネントの1つのコンポーネントからdivを見つける方法：vuejs

javascript

jquery

vue.js

関連記事