vue v-for循环中item值的问题

Question

问题描述：
我想复用一个写好的公共组件

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

其中两个items的数据结构分别如下：

items1: [
  { name: 'a' },
  { name: 'b' },
  { name: 'c' }
]items2: [
  { data: { name: 'a' } },
  { data: { name: 'b' } },
  { data: { name: 'c' } }
]

传items1时，获取name是：item.name，
传items2时，获取name是：item.data.name
除了数据结构略有不同外，其他内容一样，所以想复用这个组件

我的思路： 
在这个组件中写两个ul ，然后用一个标识去控制显示的是item.name 还是item.data.name，但是又觉得这种方法太笨，跟重新写一个组件没啥区别。

请问： 有遇到这种情况的人吗，大家都是怎么解决的（不要说跟后台商量把数据结构改为一致。。。）

Answer 1

写一个 computed 做兼容层computed: {     fItem () {        if (this.item.length == 0)            return [];                     if (this.item[0].data) {            return this.item.map((v) => v.data);         } else {            return this.item;         }     } }然后循环：fItem 就行了