web-dev-qa-db-fra.com

Comment soumettre un formulaire dans Vue, rediriger vers un nouvel itinéraire et passer les paramètres?

J'utilise Nuxt et Vue et j'essaie de soumettre un formulaire, de rediriger l'utilisateur vers un nouvel itinéraire, y compris les paramètres soumis, d'envoyer une demande d'API pour obtenir des données, puis de restituer ces données.

Pour ce faire, j'ai simplement défini l'action de formulaire sur le nouveau chemin et ajouté manuellement tous les paramètres d'URL à la demande d'API.

Je crée d'abord un formulaire simple avec la route /search.

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

Lors de la soumission du formulaire, l'utilisateur quitte la page en cours et est redirigé vers la nouvelle page. L'URL ressemblerait maintenant à ceci: http://www.example.com/search?foobar=test. Maintenant, je récupère le paramètre foobar en utilisant this.$route.query.foobar et l'envoie à mon API.

Cependant, le problème dans mon approche est lors de la soumission du formulaire, l'utilisateur quitte la page en cours et un nouveau chargement de page se produira. Ce n'est pas ce que nous voulons lors de la création d'applications Web progressives.

Ma question est donc la suivante: comment puis-je envoyer un formulaire dans Nuxt/Vue et le rediriger vers un nouvel itinéraire, y compris les paramètres soumis?

javascriptnode.jsvue.jsnuxt.js
5
phpheini

Le comportement par défaut de <form> consiste à recharger la page onsubmit. Lors de la mise en œuvre de SPA, il serait préférable d'éviter d'appeler le comportement par défaut de <form>.

L'utilisation de router module qui est disponible directement dans nuxtjs permettra à tous les contrôles de redirection de circuler dans l'application. si nous essayons de déclencher des événements disponibles via <form>, le navigateur se rechargera. Cela doit être évité.

Ma question est donc de savoir comment puis-je envoyer un formulaire dans Nuxt/Vue et le rediriger vers une nouvelle route incluant les paramètres soumis?

Vous pouvez essayer l'approche ci-dessous

Premier

Utilisez les modificateurs .stop.prevent pour empêcher le bouton d'envoi d'appeler le comportement par défaut de <form>. Ceci est similaire à l'utilisation de event.stopPropagation(); et event.preventDefault(); dans jQuery

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

Ensuite  

Créer 

  1. vue model model foobar 

  2. méthode vue submit

Utilisez this.$router.Push pour rediriger vers la page suivante. Cela permettra au flux de contrôle de rester à l'intérieur du SPA. si vous souhaitez envoyer des données sur le serveur, vous pouvez le faire avant d'appeler this.$router.Push, sinon vous pouvez rediriger et poursuivre votre logique.

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

ajoutez simplement ceci: @ submit.prevent = "false"

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

      </div>   
 </form>

j'espère que cela vous sera utile :)

0
hamid keyhani