因此，我有一个允许您发送提交内容的网站；这是一个Laravel / Vuejs应用程序。我的问题是，如果我进入表格并填写所有内容并提交表格；我的装载机卡住了，而router.push没有推到我想要的位置。它一直卡住。尽管该集合已保存在数据库中并在列表中进行了预览。
但是，一旦我手动刷新页面，表单就提交了，router.push可以工作并且加载器没有卡住。而且我不知道为什么会这样。
我在this.addItemToCollection(response.data)上遇到错误
示例：https://imgur.com/a/USpfeEn
Form.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>
Router.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))
}
]
},
]
Collection-mutation.js
/**
* Push new item to the collection.
*/
pushItem (state, payload) {
state.collection.push(payload)
},
答案 0 :(得分：0)
以根/开头的嵌套路径被视为根路径。因此，当您在/members/my-submissions/上时，对于Vue路由器，就好像您在根路径/上一样，因为/与/members/my-submissions/以及/members/my-submissions/create匹配，并且因此不会发生导航。
要解决此问题，请将您的第一个嵌套路径保留为空，例如：
{
// This should be EMPTY.
path: "",
name: "my-submissions.collection",
component: (resolve) =>
require([ "./components/List" ], m => resolve(m.default))
}
有关详细信息，请访问：https://router.vuejs.org/guide/essentials/nested-routes.html
答案 1 :(得分：0)
我自己修复了它，显然数据对象是对象中的对象，并且state.push在给对象的同时希望有一个数组。由于刷新导致它丢失了数据；该对象丢失并变成一个空数组。因此，这就是为什么刷新后仍然有效。