Vue.jsのaxiosでハマった話
非同期での検索をするのに、勉強がてらVue.jsを採用。
Vue.jsからそのままホットペッパーAPIを呼べればとてもシンプルなんだけど、APIキーを隠す必要があるので今回はPHPを挟んで通信するよ。(処理イメージはこちらの投稿)
PHP側の疎通確認はOK
WebAPIを呼び出すPHPのほうは疎通確認OK。ちゃんと検索結果のJSONが返されることが確認できてる。
返却値が描画されない…ハマった！！
では、次は画面～JS側に、上記の結果を表示させたい。
axiosを使って、非同期通信を行ってみたよ。
上記の通り、コーディング。まずは画面出力ができるよう、いったんフォームの引数は後回しに。
さぁ、いざ、画面の検索ボタン押下！
あるぇ～～？？？
本来なら、検索フォームの下に検索結果をまとめて出力できるはずなのにうまくいかない。。
コンソールにも「spliceってなんぞや」なエラーメッセージが出てる。。
なんでだ…
thisの扱いが要注意だった
試しに実行中のデバッグして確認してみたところ、this.shopListは存在していなかった。なんと！
どうやら、axios～thenの中でthisを指定した場合、そのthisが指すものはVueインスタンスではないらしい。
この罠に私はえげつない時間を費やしてしまったぁぁぁ～～！！
解決策はbind！
さて、原因はわかったので解決方法。
やり方は色々あるかもしれないけれど、今回はthenの中で一旦shopListを整形して、それをVueインスタンスへバインドすることに。
これで想定通りデータの受け渡しができるようになったはず…！
いざ、画面から検索実行！！
でた～！！！
やった！！これでとりあえず画面と外部APIとの疎通が確認できた！！大進歩です。
この調子で、さらにどんどん進めていくよ！！