Vue.js - in计算属性遍历json以创建新对象

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

<script>
export default {
  data() {
    return {
      jsonData: {
        1: { name: 'Apple', price: 1.99 },
        2: { name: 'Banana', price: 0.99 },
        3: { name: 'Orange', price: 2.49 }
      }
    };
  },
  computed: {
    transformedData() {
      const transformed = [];
      for (const key in this.jsonData) {
        const item = { id: key, ...this.jsonData[key] };
        transformed.push(item);
      }
      return transformed;
    }
  }
};
</script>