🖥
Nuxt.js + axios – 静的JSONファイルでAPIレスポンスをモックする例 ( static json file like
モック用のライブラリなど入れずに手軽に json ファイルを使いたい場合
static/users.json
[
{
"id" : 1,
"name": "Alice"
},
{
"id" : 2,
"name": "Bob"
},
{
"id" : 3,
"name": "Carol"
}
]
pages/axios-assets-json.vue
<template>
<div>
<h1>
assset API
</h1>
<h2>Users</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.id }} - {{ user.name }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
async asyncData({ $axios }) {
const users = await $axios.$get('/users.json')
// OR
// const users = await $axios.$get('http://localhost:3000/axios-assets-json')
return { users }
}
}
</script>
Original by Github issue
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2020-05-05
Discussion