Error response won't show up using vue and blade - vue.js

Question

I have created a small validation using laravel and vue js but when I tried to display the errors using vue it won't show up inside a div. When I check using dev tools, the messages are there but didn't display to the specified div.
Sample blade:
<div class="alert alert-danger" v-if="errors">
<ul>
<li v-for="error in errors">#{{ errors[0]}}</li>
</ul>
</div>
Sample script:
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

I think here is problem :
You are overriding v-if="errors" property like this when submit data :
this.errors = null
This mean your errors are now null not true and not false right.
and because of you added v-if vue looking for errors to be true or false.
<div class="alert alert-danger" v-if="errors">
<ul>
<li v-for="error in errors">#{{ errors[0]}}</li>
</ul>
</div>
You can fix like this :
data: {
errors: false,
error_messages: null,
},
After submit data and check error do this :
if (data.status === 422) {
vm.error_messages = data.responseJSON;
}
Then :
<div class="alert alert-danger" v-if="errors">
<ul>
<li v-for="error in error_messages">#{{ error[0]}}</li>
</ul>
</div>
One more thing if you still want to check how it working then use v-show rather then v-if because v-if remove element and v-show will just hide and you can change behaviour by css to display:block and there will be your result. but you have to modify if you want to use with v-if;