[Nuxt] axiosでAPIのデータを取得し表示する方法

Nuxtでaxiosを使い、APIのデータを表示する方法です。
JSONPlaceholderはJSON形式でテスト用データを配信しているサイトです。ここからデータを取得します。

[pages/sample.vue]
※Laravelと連携の場合は client/pages/sample.vue

<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にアクセスするとこのようにデータが表示されます。
2020-05-21_17h55_10



Author: webmaster