Vuejs 表单需要刷新才能让 router.push 工作

Question

所以我有一个网站可以让您发送提交；这是一个 Laravel/Vuejs 应用程序。我的问题是，如果我去我的表格并填写所有内容并提交我的表格；我的装载机卡住了，我的 router.push 没有推送到我想要它去的位置。它一直卡住。虽然收藏是保存在数据库中并在列表中预览的。

但是一旦我手动刷新我的页面，表单提交，我的 router.push 工作并且加载器没有卡住。而且我不知道为什么会这样。

我的this.addItemToCollection(response.data) 出现错误

错误：http://prntscr.com/rfpsez

示例：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)
    },

Answer 1

以根/ 开头的嵌套路径被视为根路径。因此，当您在 /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

Answer 2

我自己修好了，显然数据对象是对象中的一个对象，而 state.push 在它给出一个对象时期望一个数组。并且由于刷新导致它丢失了数据；该对象丢失并转入一个空数组。所以这就是为什么它在刷新后工作。