How can I show the validation messages in vform?-CodePudding

I have here a vue laravel spa that uses axios vform for displaying error validation messages. I currently use the axios vform 1.0.1, and I think got the syntax used correctly. However, I'm receiving errors in console after clicking submit, instead of displaying the validation messages.

Here's my markup and 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 >Create Designation</h3>
        <div >
            <div >
                <div >
                    <form @submit.prevent="addDesignation">
                        <div >
                            <label  for="name">Name</label>
                            <input  name="name" id="name" type="text" placeholder="Name" tabindex="1" v-model="form.name" : />
                        </div>
                        <div >
                            <label  for="description">Description</label>
                            <textarea rows="4"  name="description" id="description" placeholder="Description" tabindex="2" v-model="form.description" :></textarea>
                        </div>
                        <button type="submit" >Create</button>
                    </form>
                    <vue-progress-bar></vue-progress-bar>
                </div>
            </div>
        </div>
    </main>
</template>

Then this is the error message in console:

VM559:1 POST http://localhost:8000/api/designations 422 (Unprocessable Content)

Network was showing this:

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."

CodePudding user response：

you should catch errors like this:

.catch(error => {
                this.errors = error.response.data.errors;
                // console.log(this.errors);
            })

and also

data(){
errors: {}
 }

And the error in network was sent by laravel. It is not there cause you log this

.catch(err => console.log(err))

To show the error of description below text area :

  <span
                    v-if="errors['description']"
                    role="alert"
                >{{ errors["description"]}}
               </span>