ポイント
dataで変数の器を作っておいてからmoutedで変数に代入する
コード例
pages/example.vue
<template>
<ul>
<li v-for="item in items">
{{ item.id }} {{ item.title }}
</li>
</ul>
</template>
<script>
export default {
data: () => {
return {
items: [],
};
},
async mounted() {
const data = await fetch('https://jsonplaceholder.typicode.com/todos/')
const json = await data.json()
this.items = json
}
};
</script>
JSON の内容
[
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
},
{
"userId": 1,
"id": 2,
"title": "quis ut nam facilis et officia qui",
"completed": false
},
{
"userId": 1,
"id": 3,
"title": "fugiat veniam minus",
"completed": false
},
{
"userId": 1,
"id": 4,
"title": "et porro tempora",
"completed": true
},
...
表示例
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。