Блог

Я новичок в Vuejs и начинаю разрабатывать приложение с использованием laravel8 Inertiajs Vue3. В настоящее время я застрял в следующей ситуации:

У меня есть цикл данных, которые заполняют список продуктов в виде карточек. На любой карточке отображается информация о продукте и кнопка для получения дополнительной информации путем заполнения модальной формы некоторыми личными данными. Чтобы избежать повторений, я создал модальный компонент, который отлично работает только для существенной детали, мне нужно добавить идентификатор продукта к данным, отправляемым формой, поэтому я добавил скрытое поле id в форму и зарегистрировал его в функции data (). Единственный способ, который я нашел для заполнения поля «id» идентификатором продукта, — это передать его в качестве реквизита моему компоненту, а затем привязать его значение к полю «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"}"

Я должен сказать, что если я изменю тип поля со скрытого на текстовый, он покажет идентификатор, переданный из реквизитов, поэтому я не могу понять, почему он не отправляется с массивом данных. Кроме того, если я удалю привязку данных и вручную заполню поле «id», его значение будет правильно отправлено в серверную часть с массивом данных.

Есть идеи, как это решить?

Заранее благодарю вас.

Просто для дальнейшего использования я нашел решение в документации inertiajs. https://inertiajs.com/forms

В 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 , он добавляется в массив данных только в событии отправки, и все работает нормально.