vue-routerを使って遷移先のcomponentにうまく渡せない

Question

vue-routerを使って遷移先のcomponentに対してArray方のObjectを渡したく、queryに入れているのですが、

うまく渡すことができません。（現在だと初期値の[]が出力されてしまいます）

些細なことでもよろしいのでご教授頂けますと幸いです。

<v-btn @click="getSearchUsers" color="primary">検索する </v-btn>

 methods: {
      getSearchUsers: function(){
        axios.get("/users/search",{
        params: {
          name: this.name,
        }
      })
      .then(response => {this.users = response.data})

       this.$router.push({ path: '/user_show', query: { users: this.users }})
      }

遷移先component

{{ $route.query.users }}

Answer 1

JavaScriptは非同期処理なので、axiosによるgetリクエストが終わる前にthis.$router.pushが実行されて、usersが初期値のままになっていると思います。

async/awaitを使って、getが終わるのを待ってルーティングを実行するとどうでしょうか？

methods: {
  async getSearchUsers() {
    this.users = await axios.get("/users/search",{
      params: {
        name: this.name,
      }
    })
    .then(response => response.data)

   this.$router.push({ path: '/user_show', query: { users: this.users }})
 }

参考リンク

• async function - JavaScript MDN
• https://github.com/axios/axios#example
• https://qiita.com/shisama/items/61cdcc09dc69fd8d3127#asyncawait

Comments

[ko-u]

できました！

axiosは非同期処理だったんですね・・・
勉強になりました！ありがとうございます！

[shgtkshruch]

解決できてよかったです〜。

1点補足です。
今回のようなページをまたいだコンポーネント同士のデータのやり取りが頻繁に発生するなら、すでにご存知かもしれませんが、[Vuex](https://vuex.vuejs.org/ja/)を使うのも手かなと思います。
シンプルな実装で解決できるなら不要だと思いますが、場合によってはVuexを使ったほうが便利なことあります。

[ko-u]

ありがとうございます！

そうですね！
今回のようにコンポーネント間の受け渡しが多くなるようでしたら、Vuexを使ってみます！