nuxtjsのthis.$route.queryで配列を保証する

2020-2-4

vue router では?test[]=1のようなurlパラメータの記載が出来ず 配列は?test=1&test=2とすると勝手に["1" , "2"]のように配列として解釈される。 https://jp.vuejs.org/v2/guide/migration-vue-router.html#クエリ内配列のための構文-削除

そのためthis.$route.queryの値に配列の形を期待する場合

  • 未定義のとき

  • 値が1つのとき

  • 値が2つ以上のとき

の3パターンを対応しておく必要がある。 (今回はついでに中身をStringからNumberに変換)

実装

data() { return { query: { test: this.$route.query.test ? Array.isArray(this.$route.query.test) ? this.$route.query.test.map((v) => Number(v)) : [Number(this.$route.query.test)] : [] } } },

とりあえずdataの初期値として使いたかったので上記のようにしてみたが毎回これを書くのはだるいので nuxtのinject使って切り分けてみる。

utils.js

const convQuery = (value) => { if (value) { if (Array.isArray(value)) { return value.map((v) => Number(v)) } else { return [Number(value)] } } else { return [] } } export default ({ app }, inject) => { inject('convQuery', convQuery) }

これをnuxt.config.jsでpluginsに登録すれば

data() { return { query: { test: this.$convQuery(this.$route.query.test) } } },

でOK。スッキリ。