如何在VueJS中迭代Fetch API检索到的对象？

<template>
  <div>
    <ul>
      <!-- 迭代items数组 -->
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const items = ref([]);

    onMounted(async () => {
      try {
        // 发起fetch请求
        const response = await fetch('https://api.example.com/items');
        // 检查响应是否成功
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 将响应转换为JSON
        const data = await response.json();
        // 将数据赋值给items
        items.value = data;
      } catch (error) {
        console.error('Fetch error:', error);
      }
    });

    return {
      items
    };
  }
};
</script>