vue中对象动态取值

vue中有一个数组，里面包含了一堆对象，对象下还有子对象。

要获取指定的子对象字段数据，并用props的形式传递一个字符串用于指定。

传递过来后如何获取值呢？

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ getFieldValue(item, fieldPath) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    fieldPath: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      items: [
        {
          id: 1,
          name: '张三',
          address: {
            street: '长安街',
            city: '北京'
          }
        },
        {
          id: 2,
          name: '李四',
          address: {
            street: '南京路',
            city: '上海'
          }
        }
      ]
    };
  },
  methods: {
    getFieldValue(obj, path) {
      // 按照 "." 分割路径字符串
      const keys = path.split('.');
      // 使用 reduce 方法逐级访问对象
      return keys.reduce((acc, key) => {
        return acc ? acc[key] : undefined;
      }, obj);
    }
  }
};
</script>