Why doesn't Inertia JS Form work with vue.js? When I use error
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
