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

所以我有一个网站，允许你发送提交；这是一个Laravel/Vuejs应用程序。我的问题是，如果我去我的表格，填写并提交我的表格；我的加载器卡住了，我的路由器无法按到我想要的位置。它一直被卡住。尽管集合保存在数据库中并在列表中预览

但是一旦我手动刷新我的页面，表单就会提交，我的router.push工作，加载程序就不会卡住。我不明白为什么会这样

我的

this.addItemToCollection（response.data）

错误：

例如：

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>

Collection.js

     /**
     * Push new item to the collection.
     */
    pushItem (state, payload) {
        state.collection.push(payload)
    },

---

以根

/

开头的嵌套路径被视为根路径。因此，对于Vue路由器，当您在

/members/my submissions/

上时，就好像您在根路径

/

上一样，因为

/

匹配

/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))
}

---

有关此内容的详细信息，请访问：

以根

/

开头的嵌套路径被视为根路径。因此，对于Vue路由器，当您在

/members/my submissions/

上时，就好像您在根路径

/

上一样，因为

/

匹配

/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))
}

---

请在以下位置阅读更多信息：

我自己修复了它，显然数据对象是对象中的一个对象，state.push在提供对象时需要一个数组。由于刷新导致数据丢失；该对象丢失，并在空数组中翻转。这就是为什么它在刷新后工作

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

您是否尝试过使用

这个。$router.push

而不是

路由器。push

@KarmaBlackshaw是的，同样的事情也会发生。您是否尝试过使用

这个。$router.push

而不是

路由器。push

@KarmaBlackshaw是的，同样的事情也会发生。我的

路径：

现在如您所述为空，但同样的事情仍然会发生。每次刷新都会有效。如果我手动键入我的提交/创建的路线（页面重新加载），它就会工作。但是，当我单击“新建”按钮时，我在单击“保存”后不会被重定向。@Wesley，当您单击该按钮时，浏览器中的地址栏是否会更新？你能发布一个完整的组件模板示例吗？事实上，问题不在我的vue路由器中，我的

这个。addItemToCollection（response.data）

在硬刷新之前给出了一个错误：我的

路径：

现在如你所述为空，但同样的情况仍然发生。每次刷新都会有效。如果我手动键入我的提交/创建的路线（页面重新加载），它就会工作。但是，当我单击“新建”按钮时，我在单击“保存”后不会被重定向。@Wesley，当您单击该按钮时，浏览器中的地址栏是否会更新？您可以发布一个完整的组件模板示例吗？实际上，问题不在我的vue路由器中，我的

此。addItemToCollection（response.data）

在硬刷新之前给出了一个错误：