VueJS入力検証配列へのプッシュ/ポップアップ

Question

入力ユーザー名またはパスワードが空の場合はどのように項目をhasErrors配列に追加でき、入力が空でない場合は削除して、送信ボタンの無効なクラスを動的に有効/無効ですか？

<form> 
    <input type="username" v-model="form.username"> 
    <input type="password" v-model="form.password"> 
    <input type="submit" :disabled="hasErrors.length > 0"> 
</form> 

<script> 
    var app = new Vue({ 
     el: '#app', 
     data: { 
      form: { 
       username = '', 
       password = '', 
       hasErrors: [] 
      } 
     } 
    }); 
</script> 

Answer 1

あなたはこのような場合のために計算されたプロパティを使用することができます。

<script> 
    var app = new Vue({ 
     el: '#app', 
     data: { 
      form: { 
       username: '', 
       password: '', 
      } 
     }, 
     computed: { 
      hasErrors: function(){ 
       var errors = []; 
       if(this.form.username == '') errors.push('username'); 
       if(this.form.password == '') errors.push('password'); 
       return errors; 
      } 
     } 
    }) 
</script> 

そしてちょっと、これは間違いなく動作します

<input type="submit" :disabled="hasErrors.length > 0">