如何在vue 2中循环遍历对象数组和嵌套对象

<template>
  <div>
    <div v-for="item in items" :key="item.name">
      <p>Name: {{ item.name }}</p>
      <p>Age: {{ item.age }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 }
      ]
    };
  }
};
</script>

<template>
  <div>
    <div v-for="item in items" :key="item.name">
      <p>Name: {{ item.name }}</p>
      <p>Age: {{ item.age }}</p>
      <p v-for="detail in item.details" :key="detail.id">
        Detail: {{ detail.info }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          name: 'John',
          age: 25,
          details: [
            { id: 1, info: 'Detail 1' },
            { id: 2, info: 'Detail 2' }
          ]
        },
        {
          name: 'Jane',
          age: 30,
          details: [
            { id: 3, info: 'Detail 3' },
            { id: 4, info: 'Detail 4' }
          ]
        }
      ]
    };
  }
};
</script>