問題描述：我想復用一個寫好的公共組件<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，但是又覺得這種方法太笨，跟重新寫一個組件沒啥區別。請問： 有遇到這種情況的人嗎，大家都是怎么解決的（不要說跟后臺商量把數據結構改為一致。。。）
2 回答
浮云間
TA貢獻1829條經驗 獲得超4個贊
寫一個 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 就行了
添加回答
舉報
0/150
提交
取消