Vue の v-model を使ってチェックボックスの入力を受け取り、Vue Router で遷移しようとしたらうまく行かなかったので解決方法のメモとして残します。
通常画面遷移を行う form
で複数のチェックボックスのデータを画面遷移時にわたすにはvalue="items[]"のように[]`を書き加える必要があります。
Vue では Ajax を使うため、javascript
の変数に値を格納する必要がありますが、その時単純に items
という変数を用意して、v-model="itemsとし、Vue Router
のクエリにその値を渡すと正しいクエリ文字列になりません。
v-model に items[]という形で渡すことができれば正しいクエリが生成されますが、[]が配列の指定として扱われてしまうためエラーになります。
解決方法としては Vue の data オブジェクトへの宣言で以下のようにします。
data() {
return {
query: {
"items[]": []
}
}
}v-model にバインドするときに配列に key 指定で呼び出しを行うために query オブジェクトを使ってラップします。
こうすることで
v-model="query['items[]']"という呼び出しが行えるようになり、[]を文字列に含んでいるため
Vue Router で遷移するときに正しいクエリ文字列が生成されます。
