Why doesn't Inertia JS Form work with vue.js? When I use error

Question

I currently have a problem.

I once had an IndexUserSettings.vue which displayed IndexUserBillingDetail.vue. In this vue, check create: boolean == false or true. If true, CreateUserBillingDetail.vue is displayed, if false, ListUserBillingDetail.vue is displayed.

Now the problem is as follows: I have a form in CreateUserBillingDetail.vue.

<template>
<form @submit.prevent="submit" class="grid grid-cols-1">
    <label for="name">Name: </label>
    <input class="p-2 border" id="name" v-model="form.name" />

    <label for="email">Email: </label>
    <input class="p-2 border" id="email" v-model="form.email" />

    <label for="street">Steet: </label>
    <input class="p-2 border" id="street" v-model="form.street" />

    <label for="street_addition">street Addition: </label>
    <input class="p-2 border" id="street_addition" v-model="form.street_addition" />

    <label for="postal_code">Postal Code: </label>
    <input class="p-2 border" id="postal_code" v-model="form.postal_code" />

    <label for="city">City: </label>
    <input class="p-2 border" id="city" v-model="form.city" />

    <label for="country">Country: </label>
    <input class="p-2 border" id="country" v-model="form.country" />

    <label for="vat_id">Vat ID: </label>
    <input class="p-2 border" id="vat_id" v-model="form.vat_id" />

    <button type="submit">Submit</button>
</form>
</template> 

<script>
import {Inertia} from "@inertiajs/inertia";
export default {
 name: "CreateUserBillingDetail",
 props: {
    errors: Object
},
data() {
    return {
        form: this.$inertia.form({
            name: null,
            email: null,
            street: null,
            street_addition: null,
            postal_code: null,
            city: null,
            country: null,
            vat_id: null
        })
    }
},
methods: {
    submit() {
        this.form.post(route('billingdetail.store'));
    }
  }
}
</script>

Now when I put <div v-if="errors.name">{{ error.name }}</div> under each input, the page does not Work again. Why does this happen?

I do not know what to do. I wish there was a user settings page there and then the user could set everything possible at the end. (Just view and create his billing details).

Do I have to write everything in UserSettingsController? Currently I have UserSettingsController UserBillingDetailController but UserBillingDetailController is completely different route /billingdetail and want to have user settings

Answer 1

This is because the error object is empty. To get validation errors for the name field, you can also use form.errors.name. Validate as usual in the controller.