laravel vue慣性提交表單的問題

Question

我對 laravel vue 慣性有一些問題，我使用來自 github 的Bazar ，一切正常，我嘗試創建一個新的頁面名稱憑證，是從類別中的一個副本，當我創建一個新的 Z34D1F91FB2E514B8576B 憑證到頁面時，發布到我的 php 控制器，該表單中的輸入值為 0，但在類別中發送表單中的每個數據....

這是 Voucher 創建文件：

    <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>

這是慣性后方法形式：

<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>

這些是網絡檢查中的帖子：類別帖子有效負載：

優惠券后有效載荷：

這是 console.log(this.fields)：來自類別

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

從優惠券

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

Answer 1

您的后端返回 302 found 狀態碼。 好像您缺少 CSRF 令牌。 嘗試像這樣添加它：

_token: this.$page.props.csrf_token,

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

里面

this.$inertia.visit()

Answer 2

所以問題出在Database中，變量 $attributes 需要它具有 efault 值，只有在它工作之后才將值發送到有效負載，它就像一個過濾器

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