如何使用 Vuejs 使用动态数据填充表单字段

Question

我是 Vuejs 新手，开始使用 laravel8 + Inertiajs + Vue3 开发应用程序。 目前我遇到以下情况：

我有一个数据循环，将产品列表填充为卡片。任何卡片都会显示产品信息和一个按钮，通过在模式表单中填写一些个人数据来获取更多信息。 为了避免重复，我制作了一个模态组件，它仅用于基本细节，我需要将产品“id”添加到表单发送的数据中，因此我在表单中添加了一个隐藏的“id”字段，并注册了它在 data() 函数中。 我发现用产品 id 填充“id”字段的唯一方法是将其作为 prop 传递给我的组件，然后将其值绑定到“id”字段，但是在提交表单时不会发送该值.

我的实际代码是：

<template>
<div v-if="showing"
    class="fixed inset-0 w-full h-screen flex items-center justify-center bg-gray-100 bg-opacity-90"
    >
        <div class="p-4 lg:p-8 bg-white rounded-lg shadow-xl">
            <section class>
                <form @submit.prevent="submit">
                    <div class="mt-4">
                        <Input
                            id="id"
                            type="hidden"
                            v-model="form.id"
                            :value="promo.id"
                        />
                    </div>
                    <div class="mt-4">
                        <Label for="name" value="Name" class="hidden" />
                        <Input
                            id="name"
                            type="text"
                            class="block w-full"
                            v-model="form.name"
                            required
                            placeholder="Name"
                            autocomplete="name"
                        />
                    </div>
                    <div class="mt-4">
                        <Label for="email" value="Email" class="hidden" />
                        <Input
                            id="email"
                            type="email"
                            class="block w-full"
                            v-model="form.email"
                            required
                            placeholder="Email"
                            autocomplete="email"
                        />
                    </div>                  
                    <div class="mt-4">
                        <button
                            type="reset"
                            aria-label="close"
                            class="button-secondary mr-4"
                            @click="close"
                        >Cancelar</button>
                        <button type="submit" class="button-primary">Submit request</button>
                    </div>
                </form>
            </section>
        </div>
    </div>
</template>

<script>
import { useForm } from "@inertiajs/inertia-vue3";
import Button from "@/Components/Button.vue";
import Input from "@/Components/Input.vue";
import Label from "@/Components/Label.vue";

export default {
    components: {
        Button,
        Input,
        Label,
    },
    props: {
        promo: "",
        showing: {
            required: true,
            type: Boolean
        }
    },
    data() {
        return {
            form: this.$inertia.form({
                id: "",
                name: "",
                email: "",
            }),
        }
    },
    methods: {
        submit() {
            this.form.post(this.route("promotion.submit-request"), {
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
            });
        },
        close() {
            this.$emit('close');
        }
    }
}
</script>

在这个阶段，表单被提交，laravel 接收到数据数组，其中包含字段值，除了 id

#content: "{"id","name":"farid","email":"farid@email.com"}"

我必须说，如果我将字段类型从隐藏更改为文本，它会显示从 props 传递的 id，所以我无法理解为什么不提交数据数组。此外，如果我删除数据绑定并手动填写“id”字段，其值将正确发送到带有数据数组的后端。

关于如何解决它的任何想法？

提前谢谢你。

Answer 1

仅供参考，我在惯性js文档中找到了一个解决方案。 https://inertiajs.com/forms

Form helper 上有一个 transform() 方法，可以在提交表单时发挥作用：

methods: {
    submit() {
        this.form
            .transform((data) => ({
                ...data,
                id: this.promo.id,
            }))
            .post(this.route("promotion.submit-request"), {
                preserveScroll: true,
                onSuccess: () => form.reset(),
            });
    },
    close() {
        this.$emit('closeModal');
    }
}

这样promo.id就在提交事件中添加到数据数组中，一切正常。