鍍金池/ 問答/Linux  HTML/ vue v-for循環(huán)中item值的問題

vue v-for循環(huán)中item值的問題

問題描述：
我想復(fù)用一個寫好的公共組件

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

其中兩個items的數(shù)據(jù)結(jié)構(gòu)分別如下：

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
除了數(shù)據(jù)結(jié)構(gòu)略有不同外，其他內(nèi)容一樣，所以想復(fù)用這個組件

我的思路：
在這個組件中寫兩個ul ，然后用一個標識去控制顯示的是item.name 還是item.data.name，但是又覺得這種方法太笨，跟重新寫一個組件沒啥區(qū)別。

請問： 有遇到這種情況的人嗎，大家都是怎么解決的（不要說跟后臺商量把數(shù)據(jù)結(jié)構(gòu)改為一致。。。）

回答
編輯回答
好難瘦

@戦場原禮亜_Error302 的這個 map 比較靠譜
個人感覺應(yīng)該是你手動讓數(shù)據(jù)格式兼容組件，而不是讓組件去兼容數(shù)據(jù)格式
因為數(shù)據(jù)的格式總是在變，組件對數(shù)據(jù)的展示效果是不變的:

    <vfortemp :data='items1'></vfortemp>
    <vfortemp :data='items2.map(i => i.data)'></vfortemp>
2018年5月26日 19:28
編輯回答
凹凸曼

不知這樣可否

<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>
2017年8月24日 05:48
編輯回答
離夢

不需要三元吧，看看這樣

{{ item.data || item.data.name }}
2018年9月14日 07:45
編輯回答
瘋子范

寫一個 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;
        }
    }
}

然后循環(huán)：fItem 就行了

2018年7月12日 06:34
編輯回答
互擼娃

改變其中一個數(shù)組使兩個數(shù)組的格式一樣不行嗎

2018年9月5日 18:44
編輯回答
尐潴豬

用computed根據(jù)items的格式構(gòu)造出固定格式的數(shù)組，再用computed的這個數(shù)組循環(huán)出組件來

2018年3月12日 17:32