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

不知这样可否

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

Answer 2

写一个 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 就行了

Answer 3

用computed根据items的格式构造出固定格式的数组，再用computed的这个数组循环出组件来

Answer 4

改变其中一个数组使两个数组的格式一样不行吗

Answer 5

不需要三元吧，看看这样

{{ item.data || item.data.name }}

Answer 6

@戦场原礼亜_Error302 的这个 map 比较靠谱
个人感觉应该是你手动让数据格式兼容组件，而不是让组件去兼容数据格式
因为数据的格式总是在变，组件对数据的展示效果是不变的:

    <vfortemp :data='items1'></vfortemp>
    <vfortemp :data='items2.map(i => i.data)'></vfortemp>