web-dev-qa-db-ja.com

Vueでフォームを送信し、新しいルートにリダイレクトしてパラメーターを渡す方法は？

NuxtとVueを使用しています。フォームを送信し、送信されたパラメーターを含む新しいルートにユーザーをリダイレクトし、APIリクエストを送信してデータを取得し、そのデータをレンダリングしようとしています。

フォームアクションを新しいパスに設定し、すべてのURLパラメーターをAPIリクエストに手動で追加するだけでこれを実現しました。

まず、ルート/searchを使用して簡単なフォームを作成します。

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

フォームを送信すると、ユーザーは現在のページを離れ、新しいページにリダイレクトされます。 URLはhttp://www.example.com/search?foobar=testのようになります。 this.$route.query.foobarを使用してfoobarパラメーターを取得し、APIに送信します。

しかし、私のアプローチの問題は、ユーザーが現在のページを離れてフォームを送信すると、新しいページの読み込みが発生することです。これは、プログレッシブWebアプリを構築するときに必要なものではありません。

私の質問は、Nuxt/Vueでフォームを送信し、送信されたパラメーターを含む新しいルートにリダイレクトする方法です。

javascriptnode.jsvue.jsnuxt.js
10
phpheini

_<form>_のデフォルトの動作は、ページonsubmitをリロードすることです。 SPAを実装するときは、_<form>_のデフォルトの動作を呼び出さないようにする方が良いでしょう。

Nuxtjsですぐに使用できる_router module_を使用すると、すべてのリダイレクトコントロールがアプリケーション内で流れるようになります。 _<form>_を介して利用可能なイベントをトリガーしようとすると、ブラウザーのリロードが発生します。これは避ける必要があります。

私の質問は、Nuxt/Vueでフォームを送信し、送信されたパラメーターを含む新しいルートにリダイレクトする方法です。

以下のアプローチを試すことができます

最初の

_.stop.prevent_修飾子を使用して、送信ボタンがデフォルトの_<form>_動作を呼び出さないようにします。これは、jQueryでevent.stopPropagation();およびevent.preventDefault();を使用することに似ています

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

その後

作成する

  1. vueモデルオブジェクトfoobar

  2. vueメソッドsubmit

_this.$router.Push_を使用して、次のページにリダイレクトします。これにより、制御フローがSPA内にとどまります。サーバーにデータを送信する場合は、_this.$router.Push_を呼び出す前にデータを送信できます。それ以外の場合は、ロジックをリダイレクトして続行できます。

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

これを追加するだけです：@ submit.prevent = "false"

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

      </div>   
 </form>

私はこれがあなたのために役立つことを願っています:)

0
hamid keyhani