Vue使用v-for遍历API响应的嵌套数组

<div v-for="(item, index) in items" :key="index">
  {{ item }}
</div>

{
  "categories": [
    {
      "name": "Category 1",
      "items": ["Item A", "Item B", "Item C"]
    },
    {
      "name": "Category 2",
      "items": ["Item D", "Item E"]
    }
  ]
}

<template>
  <div>
    <div v-for="(category, index) in categories" :key="index">
      <h2>{{ category.name }}</h2>
      <ul>
        <li v-for="(item, itemIndex) in category.items" :key="itemIndex">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 假设这是你的API调用
      fetch('your-api-endpoint')
        .then(response => response.json())
        .then(data => {
          this.categories = data.categories;
        });
    }
  }
};
</script>

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

this.$set(this.items, index, newValue);

this.items = [...this.items, newItem];