動的にVueデータにアクセスする

Question

私は現在、Node.jsとVue.jsを使用して個人的なプロジェクトのログインページを作成していますが、vueインスタンス間のデータアクセスに問題があります。

現在、ブール値のデータ値がtrueの場合、テキスト入力ボックスにerrorクラスが割り当てられるようになっています。

var messages = new Vue({ 

    el: '#errors', 
    data: { 
     showErrors: false, 
     inUse: { 
      show: false, 
      text: 'The username you chose is already in use' 
     }, 
     tooShort: { 
      show: false, 
      text: 'The username you chose is too short (4 character minimum)' 
     }, 
     idLength: { 
      show: false, 
      text: 'The email you provided does not match the standard 7 character format' 
     } 
    }, 
    methods: { 
     resetErrors: function() { 
      if (this.showErrors) { 
       this.showErrors = false; 
       this.idLength.show = false; 
       this.inUse.show = false; 
       this.tooShort.show = false; 
      } 
     }, 
    } 

}); 

：ちょうど同じファイルでこの程度

var user = new Vue({ 

    el: '#usr-field', 
    data: { 
     hasError: messages.inUse.show || messages.tooShort.show 
    } 

}); 



var email = new Vue({ 

    el: '#email-field', 
    data: { 
     hasError: messages.idLength.show 
    } 

}); 

がもしあれば表示エラーメッセージVuejsです：私は、フィールドのための2つの別々のVues、ユーザ名の入力や電子メールの入力を持っています

私は現在、messages Vueの値に動的にアクセスしようとしていますが、ロード時以外は動作しません。 userとemail VueのhasErrorデータをmessages Vueデータに従って動的に変更する方法はありますか？

Answer 1

まず、1つのVueインスタンスを作成します。

ログインフォームの入力要素を含む要素を使用します。 例： id loginのdivラッパー

new Vue({ 
    el: '#login', 
    data: { 
     showErrors: false, 
     inUse: { 
      show: false, 
      text: 'The username you chose is already in use' 
     }, 
     tooShort: { 
     show: false, 
     text: 'The username you chose is too short (4 character minimum)' 
     }, 
     idLength: { 
     show: false, 
     text: 'The email you provided does not match the standard 7 character format' 
     } 
    }, 
    methods: { 
    resetErrors: function() { 
     if (this.showErrors) { 
      this.showErrors = false; 
      this.idLength.show = false; 
      this.inUse.show = false; 
      this.tooShort.show = false; 
     } 
    }, 
    } 
}); 

次に、あなたのHTMLには、このように、あなたの入力にあなたのクラスerrorを表示または非表示にv-bind:classを使用：あなたの電子メールフィールドの

<input id="usr-field" :class="{'error': messages.inUse.show || messages.tooShort.show}" ... 

同じ考え：

<input id="email-field" :class="{'error': messages.idLength.show}" ... 

の場合後でロジックを分離する必要があると感じたら、コンポーネントを調べることができます。