wake-up-neo.com

Wie kann ich ein Formular in Vue absenden, auf eine neue Route umleiten und die Parameter übergeben?

Ich verwende Nuxt und Vue und versuche, ein Formular zu senden, den Benutzer auf eine neue Route einschließlich der übergebenen Parameter umzuleiten, eine API-Anfrage zu senden, um Daten zu erhalten, und diese Daten dann wiedergeben.

Ich habe dies erreicht, indem ich einfach die Formularaktion auf den neuen Pfad gesetzt und alle URL-Parameter manuell zur API-Anforderung hinzugefügt habe.

Zuerst erstelle ich ein einfaches Formular mit der Route /search.

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

Beim Absenden des Formulars verlässt der Benutzer die aktuelle Seite und wird auf die neue Seite umgeleitet. Die URL würde jetzt so aussehen: http://www.example.com/search?foobar=test. Jetzt rufe ich den Parameter foobar mit this.$route.query.foobar ab und sende ihn an meine API.

Das Problem bei meinem Ansatz besteht jedoch darin, dass der Benutzer die aktuelle Seite beim Senden des Formulars verlässt und eine neue Seite geladen wird. Dies ist nicht das, was wir beim Erstellen progressiver Web-Apps wollen.

Meine Frage ist also, wie kann ich ein Formular in Nuxt/Vue absenden und auf eine neue Route mit den gesendeten Parametern umleiten?

5
phpheini

Das Standardverhalten von <form> ist das Neuladen der Seite onsubmit. Bei der Implementierung von SPAs ist es besser, das Standardverhalten von <form> zu vermeiden.

Wenn Sie router module verwenden, das in nuxtjs standardmäßig verfügbar ist, können alle Umleitungssteuerelemente innerhalb der Anwendung ausgeführt werden. Wenn wir versuchen, über <form> verfügbare Ereignisse auszulösen, erfolgt ein erneutes Laden des Browsers. Dies muss vermieden werden.

Meine Frage ist also, wie ich ein Formular in Nuxt/Vue absenden und zu .__ umleiten kann. eine neue Route mit den übermittelten Parametern?

Sie können unten Ansatz versuchen

Zuerst

Verwenden Sie .stop.prevent-Modifikatoren, um zu verhindern, dass die Senden-Schaltfläche das Standardverhalten von <form> aufruft. Dies ähnelt der Verwendung von event.stopPropagation(); und event.preventDefault(); in jQuery

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

Dann  

Erstellen 

  1. vue model object foobar 

  2. vue Methode submit

Verwenden Sie this.$router.Push, um zur nächsten Seite weiterzuleiten. Dadurch kann der Kontrollfluss im SPA bleiben. Wenn Sie Daten an den Server senden möchten, können Sie dies vor dem Aufruf von this.$router.Push tun. Andernfalls können Sie Ihre Logik umleiten und fortsetzen.

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

fügen Sie einfach Folgendes hinzu: @ submit.prevent = "false"

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

      </div>   
 </form>

ich hoffe, das ist nützlich für dich :)

0
hamid keyhani