поэтому у меня есть веб-сайт, который позволяет вам отправить заявку; это приложение Laravel / Vuejs. Моя проблема в том, что если я go заполню форму, все заполню и отправлю форму; мой загрузчик застрял и мой router.pu sh не делает pu sh в том месте, где я хочу, чтобы оно было go. это продолжает застрять. Хотя коллекция сохраняется в базе данных и просматривается в списке.
НО, как только я вручную обновлю sh своей страницы, форма отправляется, мой router.pu sh работает и загрузчик не застревает. И я не могу понять, почему это происходит.
Я получаю сообщение об ошибке this.addItemToCollection(response.data)
: http://prntscr.com/rfpsez
Пример : https://imgur.com/a/USpfeEn
Форма. vue
<template>
<form class="uk-form-horizontal"
@keydown="form.errors.clear( $event.target.name )">
<div class="uk-card uk-card-default uk-card-large uk-card-body">
<h3 class="uk-card-title">Submission</h3>
<default-text-input v-model="form.distillery"
:name="'distillery'"
:label="'Distillery'"
required />
<default-text-input v-model="form.age"
:name="'age'"
:label="'Age'"
/>
<default-text-input v-model="form.type"
:name="'type'"
:label="'Type'"
required />
<default-text-input v-model="form.volume"
:name="'volume'"
:label="'Volume'"
required />
<default-text-input v-model="form.name"
:name="'name'"
:label="'Name'"
required />
<default-text-input v-model="form.size"
:name="'size'"
:label="'Size'"
/>
<default-text-input v-model="form.strength"
:name="'strength'"
:label="'Strength'"
required />
<default-text-input v-model="form.reserve_price"
:name="'reserve_price'"
:label="'Reserve Price'"
required />
<div class="uk-margin-top uk-text-right">
<button class="uk-button uk-button-text">
Cancel
</button>
<button class="uk-button uk-button-secondary uk-margin-left"
@click.prevent="handleSubmit()">
Save
</button>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import Form from '@/forms/form'
import { mapState, mapMutations, mapActions } from 'vuex'
import TrumbowygConfig from '@/mixins/trumbowyg-config'
import toolbarCaptions from '@/mixins/toolbar-captions'
import router from '@/router/index'
import { SubmissionFieldset } from '@/environments/members/modules/my-submissions/support/submission-fieldsets'
export default {
name: 'members-my-submission-form',
mixins: [ TrumbowygConfig, toolbarCaptions ],
data () {
return {
form: new Form(SubmissionFieldset()),
loadingSubmission: false
}
},
created () {
this.loadData()
},
// Watch the loader
watch: {
loadingSubmission () { this.checkLoading() },
},
computed: {
// set cpation
caption () {
'New submission'
},
...mapState({
module: state => state.module
}),
/**
* Convenient access to the submissions state.
*/
...mapState('membersSubmissions', {
apiResource: state => state.endpoint,
notifications: state => state.collection.settings,
dataLoaded: state => state.dataLoaded
}),
/**
* indicates the form method should be spoofed to post.
*/
method () {
return 'post'
},
/**
* Api endpoint.
*/
endpoint () {
return this.apiResource
}
},
methods : {
...mapActions('membersSubmissions', {
loadSubmission: 'loadCollection'
}),
...mapMutations('membersSubmissions', {
setDataLoaded: 'setDataLoaded',
addItemToCollection: 'pushItem',
replaceItemInCollection: 'replaceItem',
}),
/**
* Load data for this view.
*/
loadData () {
this.setLayoutProperties()
},
/**
* Submit the form.
*/
handleSubmit () {
// Initiaze the loader
this.$store.commit( 'setLoading', true )
// submit the form
this.form.submit(this.method, this.endpoint).then(response => {
// create a new submission
this.addItemToCollection(response.data)
// Get back to the list page.
router.push({ name: 'my-submissions.collection' })
// de-activate the loader
this.$store.commit( 'setLoading', false )
}).catch(error => {
console.log(error)
})
},
/**
* Set layout properties for this view.
*/
setLayoutProperties () {
// Store the right items for the toolbar in the store.
this.$store.commit( 'setLayout', {
caption: this.caption,
tools: [ 'go-back' ]
})
},
checkLoading () {
let loading = this.loadingSubmission
this.$store.commit( 'setLoading', loading )
this.ready = ! loading
},
}
}
</script>
Маршрутизатор. js:
export default [
{
path: "/members/my-submissions/",
component: (resolve) => require([ "./Base" ], m => resolve(m.default)),
children: [
{
path: "/",
name: "my-submissions.collection",
component: (resolve) => require([ "./components/List" ], m => resolve(m.default))
},
{
path: "create",
name: "submission.new",
component: (resolve) => require(["./components/Form"], m => resolve(m.default))
}
]
},
]
Коллекция-мутация. js
/**
* Push new item to the collection.
*/
pushItem (state, payload) {
state.collection.push(payload)
},