Nuxt.jsでjsonファイルを読み込む方法を試してみます。
設定方法
axiosを使用します。
プロジェクトディレクトリに移動後、下記コマンドでインストールします。
1 | npm install @nuxtjs/axios |
nuxt.config.jsに下記を追加します。
1 2 3 | export default { modules: ['@nuxtjs/axios']} |
これで$axiosが使用できるようになりました。
サンプルコード
今回はローカルにjsonファイルを設置して試してみます。
static/data/ にarticle.jsonを設置します。
1 2 3 4 5 6 7 8 9 10 11 | { "articles": [ { "title": "タイトルA", "body": "Aの本文" }, { "title": "タイトルB", "body": "Bの本文" } ]} |
pages/index.vueを下記のように設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template> <ul> <li v-for="article of articles">{{ article.title }}</li> </ul></template><script> export default { data() { return { articles: [] } }, async asyncData({ $axios }) { const res = await $axios.$get('/data/article.json'); return { articles: res.articles } } }</script> |
これでjsonデータを取得してページ上に表示させることができました。
1 2 3 4 | <ul> <li>タイトルA</li> <li>タイトルB</li></ul> |
コメントが承認されるまで時間がかかります。