How to submit a form in Vue, redirect to a new route and pass the parameters?

Question

I am using Nuxt and Vue and I am trying to submit a form, redirect the user to a new route including the submitted params, send an API request to get some data and then render that data.

I achieved this by simply setting the form action to the new path and manually adding all the URL parameters to the API request.

First I create a simple form with the route /search.

<form action="/search">
  <input type="text" name="foobar">
  <button type="submit">Submit</button>
</form>

When submitting the form the user leaves the current page and gets redirected to the new page. The URL would now look like this: http://www.example.com/search?foobar=test. Now I fetch the foobar parameter by using this.$route.query.foobar and send it to my API.

However the problem in my approach is when submitting the form the user leaves the current page and a new page load will occur. This is not what we want when building progressive web apps.

So my question is how can I submit a form in Nuxt/Vue and redirect to a new route including the submitted parameters?

Solution 1

The default behavior of <form> is to reload the page onsubmit. When implementing SPA's it would be better to avoid invoking default behavior of <form>.

Making use of router module which is available out-of-box in nuxtjs will enable all the redirection controls to flow within the application. if we try to trigger events available via <form> then browser reload will occur. This has to be avoided.

So my question is how can I submit a form in Nuxt/Vue and redirect to a new route including the submitted parameters?

You can try below approach

First

Use .stop.prevent modifiers to prevent the submit button from invoking default <form> behavior. This is similar to using event.stopPropagation(); and event.preventDefault(); in jQuery

<form>
  <input type="text" name="foobar" v-model="foobar">
  <button type="submit" @click.stop.prevent="submit()">Submit</button>
</form>

Then

Create

1. vue model object foobar

2. vue method submit

Use this.$router.push to redirect to next page. This will enable the control flow to stay inside the SPA. if you want to send any data into server then you can do it before invoking this.$router.push else you can redirect and continue your logic.

export default {
    data(){
      return {
        foobar : null
      }
    },
    methods: {
      submit(){
         //if you want to send any data into server before redirection then you can do it here
        this.$router.push("/search?"+this.foobar);
      }
    }
  }

Solution 2

 submitClick(){
        this.$router.push({path: '/search', query:{key: value}})
    }

<form @submit.stop.prevent="submitClick">
       <input v-model="keyword">
       <button type="submit">Search</button>
</form>