Mengapa Borang Inertia JS tidak berfungsi dengan vue.js? Apabila saya menggunakan ralat

Question

Saya sedang menghadapi masalah.

Saya pernah mempunyai satu IndexUserSettings.vue，它显示了 IndexUserBillingDetail.vue。在此 vue 中，检查 create: boolean == false 或 true。如果为 true，则显示 CreateUserBillingDetail.vue，如果为 false，则显示 ListUserBillingDetail.vue.

Sekarang soalannya adalah seperti berikut: Saya mempunyai borang dalam 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>

Sekarang apabila saya meletakkan <div v-if="errors.name">{{ error.name }}</div> di bawah setiap input halaman tidak lagi berfungsi. Mengapa ini berlaku?

Saya tidak tahu nak buat apa. Saya harap ada halaman tetapan pengguna di sana dan kemudian pengguna boleh menetapkan segala yang mungkin pada akhirnya. (Hanya lihat dan buat butiran pengebilannya).

Saya perlu berada dalam UserSettingsController 中写入所有内容吗？目前我有 UserSettingsController + UserBillingDetailController 但 UserBillingDetailController 是完全不同的路线 /billingdetail dan ingin mempunyai tetapan pengguna

Answer 1

Ini kerana error 对象为空。要获取名称字段的验证错误，您还可以使用 form.errors.name. Sahkan seperti biasa dalam pengawal.