Vue.jsでjsonデータを読み込む方法【axiosを使おう】

Vue.jsでjsonファイルを取得、出力する方法を知りたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

jsonファイルを用意

[
    {
        "name": "佐藤",
        "school_year": 1,
        "test": {
            "japanese": 30,
            "english": 60
        }
    },
    {
        "name": "鈴木",
        "school_year": 2,
        "test": {
            "japanese": 40,
            "english": 70
        }
    },
    {
        "name": "田中",
        "school_year": 3,
        "test": {
            "japanese": 50,
            "english": 80
        }
    }
]

まずはjsonファイルを用意します。

本記事では上記のようなデータが入ってるjsonを読み込みます。

CDNを読み込む

<!-- Vue -->
<script src="https://unpkg.com/vue@next"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

本記事ではCDNで実装します。

上記scriptを実装環境に読み込みます。

axiosはサーバーからデータを取得したい時に便利なライブラリです。

jsonデータを簡単に取得できます。

Vue.jsとaxiosを定義

const app = Vue.createApp({
      data() {
        return {
          <!-- 初期値 -->
          items: [],
        };
      },
      mounted() {
        axios
          .get("jsonファイルへのパス")
          .then((response) => (this.items = response.data))
          .catch((error) => console.log(error));
      },
    });
app.mount("#app");

Vue.jsとaxiosでjsonデータを読み込むコード例です。

dataメソッドに初期値を設定。

mountedメソッド内でaxiosを定義。

getメソッドの引数にjsonファイルへのパスを記述します。

thenメソッドで読み込みに成功したら、初期値（本記事ではitems）に配列としてjsonデータを渡します。

catchメソッドで読み込みに失敗したらコンソールにerrorを出力します。

HTMLでjsonの出力先を記述

<div id="app">
  <ul>
    <li v-for="(item, index) in items" v-bind:key="item.id">
      私の名前は{{ item.name }}です。<br>
      学年は{{item.school_year}}年です。<br>
      国語の点数は{{item.test.japanese}}点。
      英語の点数は{{item.test.english}}点です。
    </li>
  </ul>
</div>
  <!-- 出力結果
  私の名前は佐藤です。
  学年は1年です。
  国語の点数は30点。 英語の点数は60点です。

  私の名前は鈴木です。
  学年は2年です。
  国語の点数は40点。 英語の点数は70点です。

  私の名前は田中です。
  学年は3年です。
  国語の点数は50点。 英語の点数は80点です。 -->

Vueのインスタンス内でjsonのデータを出力・展開します。

v-forディレクティブを使い、繰り返し処理を実行。

jsonデータが入ってる配列（items）を展開します。

以上でjsonデータの読み込み・出力の完了です。

ローカルだとjsonを読み込まない？

chromeブラウザのコンソールにCORSエラーがでてjsonを読み込まない。。

CORSエラーは静的ファイルなどを外部から読み込む際にエラーになります。

ローカルで実装したい場合はローカルサーバー環境を用意。

上記環境にjsonファイルを移動・読み込むとエラーが解消されるかもしれません。

まとめ

Vue.jsでaxiosを使いjsonデータを読み込む方法について紹介しました。

以上で解説を終わります。