problem description:
I want to reuse a written public component
<template>
<ul>
<li v-for="(item, index) in items" :key=index>
<div>
<h2>{{item.name}}</h2>
</div>
</li>
</ul>
</template>the data structures of two items are as follows:
items1: [
{ name: "a" },
{ name: "b" },
{ name: "c" }
]
items2: [
{ data: { name: "a" } },
{ data: { name: "b" } },
{ data: { name: "c" } }
] when you upload items1, you get name: item.name,
when you send items2, you get name: item.data.name
except that the data structure is slightly different, other contents are the same, so you want to reuse this component
my idea:
write two ul in this component, and then use a logo to control whether the display is item.name or item.data.name, but I think this method is too stupid, it is no different from writing a new component.
I would like to ask: is there anyone who has encountered this kind of situation, and how do we solve it (not to mention discussing with the background to change the data structure to be consistent? )