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 t

Answer 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);
      }
    }
  }

Answer 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>

This is the right way to achieve a SPA with form submit. it supports enter key and in submitClick, there can be any logic before submitting

Answer 3

just add this: @submit.prevent="false"

<form @submit.prevent="false">
      <div class="form-group">

      </div>   
 </form>

i hope this be useful for u :)