Warum funktioniert Inertia JS Form nicht mit vue.js? Wenn ich Fehler verwende

Question

Ich habe derzeit ein Problem.

Ich hatte einmal eins IndexUserSettings.vue，它显示了 IndexUserBillingDetail.vue。在此 vue 中，检查 create: boolean == false 或 true。如果为 true，则显示 CreateUserBillingDetail.vue，如果为 false，则显示 ListUserBillingDetail.vue.

Die Frage lautet nun wie folgt: Ich habe ein Formular 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>

Wenn ich jetzt <div v-if="errors.name">{{ error.name }}</div> unter jede Eingabe setze, funktioniert die Seite nicht mehr. Warum passiert das?

Ich weiß nicht, was ich tun soll. Ich wünschte, es gäbe dort eine Benutzereinstellungsseite und dann könnte der Benutzer am Ende alles Mögliche einstellen. (Sehen Sie sich einfach seine Rechnungsdetails an und erstellen Sie diese).

Ich muss dabei sein UserSettingsController 中写入所有内容吗？目前我有 UserSettingsController + UserBillingDetailController 但 UserBillingDetailController 是完全不同的路线 /billingdetail und möchte Benutzereinstellungen haben

Answer 1

这是因为 error 对象为空。要获取名称字段的验证错误，您还可以使用 form.errors.name。 在控制器中照常进行验证。