Vuejs form needs refresh in order to let the router.push work

Question

so I have a website that allows you to send a submission; it's a Laravel/Vuejs application . My issue is that if I go to my form and fill everything in and submit my form; my loader is stuck and my router.push doesnt push to the location I want it to go. it keeps getting stuck. Although the collection is saved in the database and previewed on the list.

BUT once I manually refresh my page, the form submits, my router.push works and the loader is not stuck. And I can't figure out why this happens.

I get an error on my this.addItemToCollection(response.data)

error: http://prntscr.com/rfpsez

Example: 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)
    },

have you tried using this.$router.push instead of router.push — Karma Blackshaw

Harshal Patil Harshal Patil · Accepted Answer · 2020-03-11T11:28:55

Nested paths that start with root / are treated as root paths. So when you are on /members/my-submissions/, for Vue router, it is as if you are on root path / since / matches /members/my-submissions/ as well as /members/my-submissions/create and thus no navigation happens.

To fix this, leave your first nested path empty, like:

{
    // This should be EMPTY.
    path: "",
    name: "my-submissions.collection",
    component: (resolve) => 
        require([ "./components/List" ], m => resolve(m.default))
}

Read more about this at: https://router.vuejs.org/guide/essentials/nested-routes.html

Vuejs form needs refresh in order to let the router.push work

2 Answers