我這里有一個axios vform用于顯示錯誤驗證訊息的 vue laravel spa。我目前使用axios vform1.0.1，并且我認為正確使用了語法。但是，單擊提交后，我在控制臺中收到錯誤，而不是顯示驗證訊息。
這是我的標記和 vue：
<script>
import Form from 'vform'
export default {
data: () => ({
form: new Form({
name: '',
description: ''
}),
}),
methods: {
addDesignation() {
this.form
.post('/api/designations', this.form)
.then(response => (
this.$router.push({ name: 'designations' })
))
.catch(err => console.log(err))
.finally(() => this.loading = false)
}
}
}
</script><template>
<main>
<h3 class="text-2xl text-gray-800 font-bold leading-none mb-6">Create Designation</h3>
<div class="px-5 py-6 shadow-sm rounded-md bg-white">
<div class="row">
<div class="col-md-6">
<form @submit.prevent="addDesignation">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2 required" for="name">Name</label>
<input class="shadow appearance-none border rounded w-2/4 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" name="name" id="name" type="text" placeholder="Name" tabindex="1" v-model="form.name" :class="{ 'invalid': form.errors.has('name') || form.errors.has('name') }" />
</div>
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2 required" for="description">Description</label>
<textarea rows="4" class="shadow appearance-none border rounded w-2/4 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" name="description" id="description" placeholder="Description" tabindex="2" v-model="form.description" :class="{ 'invalid': form.errors.has('description') || form.errors.has('description') }"></textarea>
</div>
<button type="submit" class="sm:hidden md:flex bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded outline-none focus:outline-none">Create</button>
</form>
<vue-progress-bar></vue-progress-bar>
</div>
</div>
</div>
</main>
</template>然后這是控制臺中的錯誤訊息：
VM559:1 POST http://localhost:8000/api/designations 422 (Unprocessable Content)
網路顯示了這一點：
message: "The given data was invalid.", errors: {description: ["The description field is required."]}}
errors: {description: ["The description field is required."]}
message: "The given data was invalid."uj5u.com熱心網友回復：
你應該捕捉到這樣的錯誤：
.catch(error => {
this.errors = error.response.data.errors;
// console.log(this.errors);
})
并且
data(){
errors: {}
}
網路中的錯誤是由 laravel 發送的。它不存在，因為你記錄了這個
.catch(err => console.log(err))
要在文本區域下方顯示描述錯誤：
<span
v-if="errors['description']"
role="alert"
>{{ errors["description"]}}
</span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/452249.html