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 就行了