Vue.js で json を読み込む

静的なデータをコンポーネントと別ファイルで管理したい時にどうぞ。

Vue-cliを使っている場合

例えばassetフォルダ内にjsonファイルを用意して、それをcomponentsフォルダ内のコンポーネントから読み込むときは以下のように書けば良い。

assets/data.json

[
  {
    "id": 1,
    "name": "hogehoge"
  },
  {
    "id": 2,
    "name": "gehogeho"
  },...
]

main.vue

import users from '../assets/data.json'

export default {
  data: () => {
     users: users
  }
}

その他の場合

axiosを使う必要があります

index.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./app.js"></script>

app.js

var app = new Vue({
  data: {
     items:null
  },
  mounted: function () {
    axios.get("./items.json").then(response => (this.items = response))
  }
})