Nuxtでaxiosを使い、APIのデータを表示する方法です。
JSONPlaceholderはJSON形式でテスト用データを配信しているサイトです。ここからデータを取得します。
[pages/sample.vue]
※Laravelと連携の場合は client/pages/sample.vue
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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にアクセスするとこのようにデータが表示されます。
