為什麼 Inertia JS Form 不能與 vue.js 一起使用？當我使用錯誤時

Question

我目前遇到一個問題。

我曾經有一個 IndexUserSettings.vue，它顯示了 IndexUserBillingDetail.vue。在此 vue 中，檢查 create: boolean == false 或 true。如果為 true，則顯示 CreateUserBillingDetail.vue，如果為 false，則顯示 ListUserBillingDetail.vue。

現在問題如下： 我在 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>

現在，當我將<div v-if="errors.name">{{ error.name }}</div> 放在每個輸入下時，頁面不再工作。 為什麼會出現這種情況？

我不知道該怎麼做。我希望那裡存在一個用戶設定頁面，然後用戶可以在最後設定所有可能的內容。 （只需查看並建立他的帳單詳細資料）。

我必須在 UserSettingsController 中寫入所有內容嗎？目前我有 UserSettingsController UserBillingDetailController 但 UserBillingDetailController 是完全不同的路線 /billingdetail 並希望有使用者設定

Answer 1

這是因為 error 物件為空。若要取得名稱欄位的驗證錯誤，您也可以使用 form.errors.name。 在控制器中照常進行驗證。