質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

1436閲覧

Nuxt.js のasync fetchのqueryパラメータが通常時とリロード時で形が違う

ms5025

総合スコア292

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/12/26 03:06

前提・実現したいこと

以下のようなパラメータのリンクがあります
詳細は省きますが
aaは文字列
bbはjson型の配列パラメータとなっています
bb: { k: 0 ,m: 0, w: 0 }

<nuxt-link class="link" :to="{path: '/hoge/hage', query: {pram_aa: aa, param_bb: bb}}" >テストリンク</nuxt-link>

画面遷移時async fetchでデータを取得すると
以下のqueryにはObjectが入っており、
パラメータのjsonが参照でき、それ行こうの処理で使用可能でした

async fetch ({ store, error, query, route, from }) { console.log(query); 〜処理〜 },

しかしF5リロードすると
console.log(query);は

{ param_aa: 'aa', param_bb: '[object Object]'}

となってしまい、param_bbのJsonが参照できません。
urlのパラメータに配列を設定するのがそもそもの間違いなのでしょうか?

希望する挙動

async fetchで、F5リロード時にも
param_bbのjsonの値
bb: { k: 0 ,m: 0, w: 0 }
を参照できるようにしたいです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

遷移先のURLパラメーターは?pram_aa=a&param_bb=%5Bobject%20Object%5Dとなっていませんか?
ルーター遷移の際はNuxtで親切に値を引き受けてるようですが、リロード時は素直にURLのクエリを評価するので[object Object]となります。
それぞれ別のクエリとして投げたほうが安全ですが、どうしてもURLパラメーターにObjectを渡したいというのであれば一度文字列にエンコードし、引き取った際にデコードする必要があります。

vue

1<template> 2 <div> 3 <!-- 素直なパターン --> 4 <n-link 5 :to="{ 6 path: '/hoge/', 7 query: { k: bb.k, m: bb.m, m: bb.w } 8 }" 9 ></n-link> 10 <!-- Objectにこだわるパターン --> 11 <n-link 12 :to="{ 13 path: '/hoge/', 14 query: { param_bb: stringify(param_bb) } 15 }" 16 ></n-link> 17 </div> 18</template> 19 20<script> 21export default { 22 methods: { 23 stringify(value) { 24 return JSON.stringify(value) 25 } 26 }, 27 // Objectを引取った際のデコード処理 28 fetch({ query }) { 29 const param_bb = JSON.parse(query.param_bb) 30 } 31} 32</script>

投稿2019/12/26 04:23

nt4c

総合スコア768

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ms5025

2019/12/26 04:47 編集

うわ。。ありがとうございます。 知りたかったことがズバリ回答していただけて、 感謝しています!! >遷移先のURLパラメーターは?pram_aa=a&param_bb=%5Bobject%20Object%5Dとなっていませんか? なっています! ルーター遷移の場合はNuxtが親切心でやってくれてるだけだったのですね・・・。 ちなみに通常fetchの場合、Nuxtがやってくれてるので JSON.parse(query.param_bb)ではエラーが出てしまいました。 Objectかどうか、という判定で逃れる判定をしてみましたが if文にも入ってきません if (Object.prototype.toString.call( query.param_bb ) === "[object Object]") { query.param_bb = JSON.parse(query.param_bb); } この判定方法では回避できないのでしょうか。 質問重ね重ねすいません。
ms5025

2019/12/26 04:56

Unexpected token o in JSON at position 1 と出ますので、 でやはりparseできないです・・
nt4c

2019/12/26 07:43

nuxt-linkに設定しているオブジェクトを一律で文字列に変換していますか?文字列で送った場合はNuxtでも自動で変換はしてくれないと思うので全てデコードする必要があります。
ms5025

2019/12/26 10:23

そうなんですね! ありがとうございます!! 試してみます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問