Zenn
🖥

Nuxt / Vue – 外部のJSOI APIをFetchして v-for で表示するコード例

に公開
tech

ポイント

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
  },
...

表示例

<img width="587" alt="image" src="https://user-images.githubusercontent.com/13635059/210159611-e5368b97-7475-43e0-afa9-cdbe085fef60.png">

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-01

Discussion