Nuxt2 / Nuxt3 (Vue ) - ボタンをクリックしたら Fetch で GETリクエストする

コード例

<template>
  <div>
    <div>
      <button @click="getTodos">getTodos</button>
    </div>
    <ul>
      <li v-for="item in items">
        {{ item.id }} {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data: () => {
    return {
      items: [],
    };
  },
  methods: {
    async getTodos() {
      const data = await fetch('https://jsonplaceholder.typicode.com/todos/')
      const json = await data.json()
      this.items = json
    }
  },
};
</script>

表示例

<img width="867" alt="image" src="https://user-images.githubusercontent.com/13635059/211199744-0c4a2d95-4cce-4ece-b000-7fd1fdeef6d6.png">

チャットメンバー募集

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

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

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-08