[Nuxt] axiosでAPIのデータを取得し表示する方法
Nuxtでaxiosを使い、APIのデータを表示する方法です。
JSONPlaceholderはJSON形式でテスト用データを配信しているサイトです。ここからデータを取得します。
[pages/sample.vue]
※Laravelと連携の場合は client/pages/sample.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> </template> <script> export default { async asyncData({ $axios }) { const users = await $axios.$get( "https://jsonplaceholder.typicode.com/users", { params: {}, } ); return { users }; }, }; </script> |
http://www.example.com:3000/sampleにアクセスするとこのようにデータが表示されます。
関連記事
- [Nuxt] パラメータの取得とバリデート
- [CakePHP] 独自SQLのAS句で新しいフィールドを作りCakePHPの形式でデータを出力する方法
- [Vue.js] コンポーネントを使ってパーツを再利用
- [Nuxt] axiosとproxyのインストール
- [webpack] インストールと使い方
