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....
This is the Voucher vue create file:
<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:
<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
Proxy { <target>: Object { media: [], slug: "asdasd" }, <handler>: {…} }
from Vouchers
Proxy { <target>: Array []
length: 0
name: "test"}, <handler>: {…} }
