Accès dynamique aux données Vue

Question

Je suis en train de créer une page de connexion pour un projet personnel que j'utilise en utilisant Node.js et Vue.js et j'ai des problèmes avec l'accès aux données entre les instances de vue.

Je l'ai actuellement en cours de fonctionnement de sorte qu'une boîte de saisie de texte aura une classe error qui lui est affectée si une valeur de donnée booléenne est vraie. J'ai deux Vues séparés pour les champs, une entrée de nom d'utilisateur et d'entrée email:

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 
    } 

}); 

Juste à ce sujet dans le même fichier est le Vuejs pour les messages d'erreur qui apparaissent s'il y en a:

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; 
      } 
     }, 
    } 

}); 

La façon dont j'essaie actuellement d'accéder dynamiquement aux valeurs de la Vue messages ne fonctionne pas, sauf pour le chargement. Y at-il un moyen que je puisse avoir le user et le email changement de données hasError de Vue dynamiquement en conformité avec les données Vue messages?

Answer 1

Commencez par créer une seule instance de Vue.

Utilisez un élément qui inclut vos éléments de saisie du formulaire de connexion. Par ex. un wrapper div avec l'ID login.

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; 
     } 
    }, 
    } 
}); 

Puis dans votre code HTML, utilisez v-bind:class pour afficher ou masquer votre classe error dans vos entrées, comme ceci:

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

Même idée pour votre champ email:

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

Si plus tard, vous sentirez le besoin d'isoler la logique, vous voudrez peut-être regarder dans les composants.