laravel vue惯性提交表单的问题

Question

我对 laravel vue 惯性有一些问题，我使用 github 中的 Bazar，一切正常，我试图制作一个新页面名称 Voucher，是 Categories 的一个副本，当我转到页面 Create 时，要创建一个新的凭证，惯性 post 到我的 php 控制器，该表单的输入值为 0，但在类别 post 从表单发送每个数据....

这是凭证 vue 创建文件：

    <template>
        <data-form class="row" :action="action" :data="voucher" #default="form">
            <div class="col-12 col-lg-7 col-xl-8 form__body">
                <card :title="__('General')">
                    <data-form-input
                        type="text"
                        name="name"
                        :label="__('Name')"
                        v-model="form.data.name"
                    ></data-form-input>
                    <data-form-input
                        type="text"
                        name="unit"
                        :label="__('Value (unit-200 or percent-30)')"
                        v-model="form.data.unit"
                    ></data-form-input>
                    <data-form-input
                        type="number"
                        name="uses"
                        :label="__('Number of uses')"
                        v-model="form.data.uses"
                    ></data-form-input>
                    <data-form-input
                        handler="editor"
                        name="description"
                        :label="__('Description')"
                        v-model="form.data.description"
                    ></data-form-input>
                </card>
            </div>
            <div class="col-12 col-lg-5 col-xl-4 mt-5 mt-lg-0 form__sidebar">
                <div class="sticky-helper">
                    <card :title="__('Actions')">
                        <div class="form-group d-flex justify-content-between mb-0">
                            <button type="submit" class="btn btn-primary" :disabled="form.busy">
                                {{ __('Save') }}
                            </button>
                        </div>
                    </card>
                </div>
            </div>
        </data-form>
    </template>
    
    <script>
        export default {
            props: {
                voucher: {
                    type: Object,
                    required: true,
                },
            },
    
            mounted() {
                this.$parent.icon = 'coupon';
                this.$parent.title = this.__('Create Voucher');
            },
    
            computed: {
                action() {
                    return '/bazar/vouchers';
                },
            },
        }
    </script>

这是vue创建的分类页面：

<template>
    <data-form class="row" :action="action" :data="category" #default="form">
        <div class="col-12 col-lg-7 col-xl-8 form__body">
            <card :title="__('General')">
                <data-form-input
                    type="text"
                    name="name"
                    :label="__('Name')"
                    v-model="form.data.name"
                ></data-form-input>
                <data-form-input
                    type="text"
                    name="slug"
                    :label="__('Slug')"
                    v-model="form.data.slug"
                ></data-form-input>
                <data-form-input
                    handler="editor"
                    name="description"
                    :label="__('Description')"
                    v-model="form.data.description"
                ></data-form-input>
            </card>
        </div>
        <div class="col-12 col-lg-5 col-xl-4 mt-5 mt-lg-0 form__sidebar">
            <div class="sticky-helper">
                <card :title="__('Media')" class="mb-5">
                    <data-form-input
                        handler="media"
                        name="media"
                        v-model="form.data.media"
                    ></data-form-input>
                </card>
                <card :title="__('Actions')">
                    <div class="form-group d-flex justify-content-between mb-0">
                        <button type="submit" class="btn btn-primary" :disabled="form.busy">
                            {{ __('Save') }}
                        </button>
                    </div>
                </card>
            </div>
        </div>
    </data-form>
</template>

<script>
    export default {
        props: {
            category: {
                type: Object,
                required: true,
            },
        },

        mounted() {
            this.$parent.icon = 'category';
            this.$parent.title = this.__('Create Category');
        },

        computed: {
            action() {
                return '/bazar/categories';
            },
        },
    }
</script>

这是惯性post方法形式：

<template>
    <form @submit.prevent="submit" @reset.prevent="reset" @keydown.enter.prevent>
        <slot v-bind="{ data: fields, errors, busy }"></slot>
    </form>
</template>

<script>
    import Errors from './Errors';

    export default {
        props: {
            action: {
                type: String,
                required: true,
            },
            method: {
                type: String,
                default: 'POST',
            },
            data: {
                type: Object,
                default: () => {},
            },
            preserveState: {
                type: Boolean,
                default: true,
            },
        },

        remember: {
            data: ['fields'],
            key: window.location.pathname,
        },

        provide() {
            return {
                form: {
                    busy: this.busy,
                    data: this.fields,
                    errors: this.errors,
                },
            };
        },

        data() {
            return {
                busy: false,
                errors: new Errors(this.$page.props.errors),
                fields: JSON.parse(JSON.stringify(this.data)),
            };
        },

        methods: {
            submit() {
                this.$inertia.visit(this.action, {
                    data: this.fields,
                    preserveState: this.preserveState,
                    method: this.method.toLowerCase(),
                    onStart: (event) => {
                        this.busy = true;
                    },
                    onFinish: (event) => {
                        this.errors.fill(this.$page.props.errors);
                        this.busy = false;
                    },
                });
            },
            reset() {
                this.errors.clear();
                this.busy = false;
                this.fields = JSON.parse(JSON.stringify(this.data));
            },
        },
    }
</script>

这些是 post 在网络检查中：类别 post 负载：

代金券post 负载：

这是console.log(this.fields)：来自类别

Proxy { <target>: Object { media: [], slug: "asdasd" }, <handler>: {…} }

来自代金券

Proxy { <target>: Array []
length: 0
name: "test"}, <handler>: {…} }

Answer 1

您的 back-end returns 302 找到状态代码。好像您缺少 CSRF 令牌。尝试这样添加：

_token: this.$page.props.csrf_token,

（或保存 CSRF 令牌的任何地方）

里面

this.$inertia.visit()

Answer 2

所以问题出在数据库中，在我将变量 $attributes 设置为默认值之后，只有在那之后才能工作并将我在输入中输入的值发送到 payload

    protected $attributes = [
        'uses'          => 0,
        'code'          => '',
        'value'         => 0,
        'name'          => '',
        'description'   => null,
        'type'          => 'fix'
    ];

laravel vue惯性提交表单的问题

Problem with laravel vue inertia submit form

php

inertiajs

laravel

vue.js

axios