エラー応答はvueとブレードを使用して表示されません

Question

laravelとvue jsを使用して小さな検証を作成しましたが、vueを使用してエラーを表示しようとしたときにdiv内に表示されません。 devツールを使ってチェックすると、メッセージはそこにありますが、指定されたdivには表示されませんでした。

サンプルブレード：

<div class="alert alert-danger" v-if="errors"> 
    <ul> 
      <li v-for="error in errors">@{{ errors[0]}}</li> 
    </ul> 
</div> 

サンプルスクリプト：

var vm = new Vue({ 
     el:'#app', 
     data: { 
      errors: false 
     }, 
     mounted: function() { 
      $('.fileinput').fileinput(); 
     }, 
     methods: { 
      submitForm: function() { 
       vm.errors = null; 
       var form = document.forms.namedItem("addProjectForm"); 
       var formdata = new FormData(form); 
       $.ajax({ 
        url: $('#addProjectForm').attr('action'), 
        data: formdata, 
        contentType: false, 
        processData: false, 
        method: 'post', 
        error: function(data) { 
         if (data.status === 422) { 
          vm.errors = data.responseJSON; 
         } 
        }, 
        success: function(data) { 
         swal("Success", "Project added successfully", "success") 
        } 
       }); 
      } 
     } 
    }) 

Answer 1

私はここだと思うが問題です：

データを提出するときに、このようv-if="errors"プロパティをオーバーライドしている：

this.errors = null 

これは、あなたのエラーが現在nullではなく、正しくないことを意味します。

となりました.V-if vueを追加したことにより、エラーが真または偽であることが検索されました。

<div class="alert alert-danger" v-if="errors"> 
    <ul> 
      <li v-for="error in errors">@{{ errors[0]}}</li> 
    </ul> 
</div> 

あなたは次のように修正することができます。

data: { 
    errors: false, 
    error_messages: null, 
}, 

後のデータを提出し、エラーがこれを行うチェック：次に

if (data.status === 422) { 
    vm.error_messages = data.responseJSON; 
} 

：

<div class="alert alert-danger" v-if="errors"> 
    <ul> 
      <li v-for="error in error_messages">@{{ error[0]}}</li> 
    </ul> 
</div> 

もう一つは、あなたの場合まだそれがどのように働いているかチェックしたいv-ifの代わりにv-showを使用してください。なぜなら、v-if remove要素とv-showは単に非表示になり、CSSによって動作をdisplay:blockに変更することができ、その結果が表示されるからです。 v-ifで使用する場合は変更する必要があります。