【Vue.js】【axios】クエリパラメータ指定せずに、ハマった件

タイトル通り。

いや～、半日くらい使いましたね。

もっとだな。一日くらい。ずっと悩んでたもん。

Webの知識が無いのにVue.jsに手出しちゃうから。

やりたかったこと

axiosを使ってjson-serverからJSONをGETして、画面表示

ハマった原因

・クエリパラメータを指定していなかった為、Objectとして取得されていた

・Objectを配列に変換せずにv-forで回してた

クエリパラメータを指定した場合と、指定していなかった場合で取得するデータが違う。

・クエリパラメータを指定した場合

コード

      Axios.get("/users/?id=" + this.inputVal)
       .then((response) => {
         this.users = response.data;
       })
       .catch((err) => {
         console.log(err);
       });

取得データ

[
 {
   "id": "001",
   "name": "Tiyoko"
 }
]

・クエリパラメータを指定しない場合

コード

      Axios.get("/users/" + this.inputVal)
       .then((response) => {
         this.users = response.data;
       })
       .catch((err) => {
         console.log(err);
       });

取得データ

{
 "id": "001",
 "name": "Tiyoko"
}

微妙に取得されるデータが違ってますよね。

要するに、クエリパラメータを指定すれば配列でちゃんと取得できるってわけだ。

以上です。次回はクエリパラメータについて記事書こうと​思います。

クエリパラメータってなんぞや。

以上です。

見て頂きありがとうございました！