Vue2 v-Text funktioniert nicht korrekt

Question

Ich fange einfach an Vue2 zu verwenden und auf einer Seite brauche ich nur einfache Formularübergabe und Validierung. Das Problem ist, wenn ein Fehler ausgelöst wird, ich möchte es unter jeder der Formulareingaben anzeigen, aber der Fehler wird nur angezeigt, nachdem ich einige dieser Eingaben zu füllen begonnen habe, nicht unmittelbar nach dem Fehler.

HTML:

<div class="container" id="app"> 
<div class="row"> 
    <div class="col-sm-6 col-md-4 col-md-offset-4"> 
     <h1 class="text-center login-title">Sign in to continue</h1> 
     <div class="account-wall"> 
      <form method="POST" action="/account/login" @submit.prevent="onSubmit" @keydown="clearErrors($event.target.name)"> 

       <input type="text" class="form-control" name="email" placeholder="Email" autofocus v-model="email"> 
       <p class="alert alert-danger" v-if="errors.email" v-text="errors.email"></p> 

       <input type="password" class="form-control" name="password" placeholder="Password" v-model="password"> 
       <div class="alert alert-danger" v-if="errors.password" v-text="errors.password"> </div> 

       <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> 
      </form> 
     </div> 
    </div> 
</div> 

und js Code:

app = new Vue({ 
    el: '#app', 
    data: { 
     email: '', 
     password: '', 
     errors: {} 
    }, 
    methods: { 
     onSubmit() { 
      axios.post('/account/login', {email: this.email, password: this.password}) 
       .then(response => alert('Wahoo!')) 
       .catch(errors => 
        Object.keys(errors.response.data).forEach(
         key => this.errors[key] = errors.response.data[key][0] 
        ) 
       ) 
     }, 
     clearErrors(errorName) { 
      delete this.errors[errorName]; 
     } 
    } 
}); 

Also, wenn Fehler Vue root elemens catched wird aktualisiert, aber Fehler nicht

gezeigt und erst nachdem ich anfange etwas von dem Feld zu füllen d die anderen erros sind erscheinen

Ich weiß, dass es viel besser gemacht werden kann, aber ich brauche es so schnell/einfach wie möglich. Danke für jede Hilfe !!!

Answer 1

Wie Sie nicht errors.email und errors.password im Datenteil definiert haben, sind sie nicht reactive, so dass, wenn nur errors.email Änderungen, diese das DOM nicht aktualisiert.

Sie können vm.$set bis verwenden Legen Sie eine Eigenschaft für ein Objekt fest. Wenn das Objekt reaktiv ist, stellen Sie sicher, dass die Eigenschaft als reaktive Eigenschaft erstellt wird und die Ansichtsaktualisierungen ausgelöst werden

Siehe die Arbeitsgeige here.

Vue Code:

methods: { 
    onSubmit() { 
     setTimeout(() => { 
     this.$set(this.errors, 'email', 'email errror') 
     this.$set(this.errors, 'password', 'password errror') 
     }, 300) 
    },