axios laravel vue inertia提交表单的问题

bzzcjhmw  于 2022-11-05  发布在  iOS
关注(0)|答案(2)|浏览(163)

我有一些问题与laravel vue惯性,我使用**Bazar**从github,一切工作,我试图使一个新的页面名为凭证,是一个一个副本从类别,当我去页面创建,创建一个新的凭证,惯性后到我的PHP控制器与0输入值从表单,但在类别后发送每个数据从表单...

这是凭证版本创建文件:

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

这些是在网络检查中发布的:分类帖子有效负载:

凭证过帐有效负载:

这是控制台.log(此.fields):来自类别

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

来自凭单

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

uxhixvfz1#

您的后端返回302找到状态代码。似乎您缺少CSRF令牌。请尝试按以下方式添加它:

_token: this.$page.props.csrf_token,

(or保存CSRF令牌位置)
内部

this.$inertia.visit()
ycl3bljg

ycl3bljg2#

因此,问题出在数据库中,变量$属性需要它具有efault值,只有在此之后它才能工作,然后将值发送到有效负载,这就像一个过滤器

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

相关问题