使用vue.js将接口数据保存到数组中

<template>
  <div>
    <ul>
      <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 {
        const response = await fetch('https://api.example.com/items');
        const data = await response.json();
        items.value = data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    });

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

<ul v-if="items.length">
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<p v-else>Loading...</p>

try {
  // ...fetch code...
} catch (error) {
  console.error('Error fetching data:', error);
  // Optionally, set an error state to show a user-friendly message
}

if (Array.isArray(data)) {
  items.value = data;
} else {
  console.error('Invalid data format:', data);
}