[英]Problem with laravel vue inertia submit form
I have some problem with laravel vue inertia, i use Bazar from github, everything work, i tried to make a new page name Voucher, is one-one copy from Categories, when i go to page Create, to create a new voucher, inertia post to my php controler with 0 inputs values from that form, but in categories post send every data from form....我对 laravel vue 惯性有一些问题,我使用来自 github 的Bazar ,一切正常,我尝试创建一个新的页面名称凭证,是从类别中的一个副本,当我创建一个新的 Z34D1F91FB2E514B8576B 凭证到页面时,发布到我的 php 控制器,该表单中的输入值为 0,但在类别中发送表单中的每个数据....
This is the Voucher vue create file:这是 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>
This is the categories vue create page:这是类别 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>
This is the inertia post method form:这是惯性后方法形式:
<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>
These are post in network inspect: Categories post payload:这些是网络检查中的帖子:类别帖子有效负载:
Voucher post payload:优惠券后有效载荷:
This is the console.log(this.fields): from Categories这是 console.log(this.fields):来自类别
Proxy { <target>: Object { media: [], slug: "asdasd" }, <handler>: {…} }
from Vouchers从优惠券
Proxy { <target>: Array []
length: 0
name: "test"}, <handler>: {…} }
Your back-end returns 302 found status code.您的后端返回 302 found 状态码。 Seems like you're missing CSRF token.
好像您缺少 CSRF 令牌。 Try to add it like this:
尝试像这样添加它:
_token: this.$page.props.csrf_token,
(or wherever you have CSRF token saved) (或任何保存 CSRF 令牌的地方)
inside里面
this.$inertia.visit()
So the problem was in Database , variable $attributes need it to have efault values, only after that it worked and then values have been sended to payload, it's like a filter所以问题出在Database中,变量 $attributes 需要它具有 efault 值,只有在它工作之后才将值发送到有效负载,它就像一个过滤器
protected $attributes = [
'uses' => 0,
'code' => '',
'value' => 0,
'name' => '',
'description' => null,
'type' => 'fix'
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.