vue3-composition-api-import

vue3-composition-api-fetch.vue

<template>
  <div>
    <ul>
      <li v-for="u in users" :key="u.id">{{ u.name }}</li>
    </ul>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    name: 'HelloWorld',
    setup() {
      
      const users = ref(null);

      const getData = async () => {
        try {
          let data = await fetch('https://jsonplaceholder.typicode.com/users');
          if(!data.ok) {
            throw Error('fetch data 失敗');
          }
          users.value = await data.json();
        } catch(error) {
          throw Error(error)
        }
      }
      getData();

      return { users }
    
    }
  }
</script>