Ошибка ответа не будет отображаться с использованием vue и blade-сервера

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 

Это означает, что ваши ошибки теперь недействительны, а не неверны.

и из-за того, что вы добавили 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-show, а не v-if, потому что v-if remove element и v-show просто спрячутся, и вы можете изменить поведение css на display:block, и будет ваш результат. но вам нужно изменить, если вы хотите использовать с v-if;