为什么 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。 在控制器中照常进行验证。