如何预处理键内循环并在Vue 3中显示为标签

Question

我想循环遍历以下json对象:

{countryId: 1, countryName: 'Bangladesh4', countryShortName: 'BD4', authStatus: 'U', createdBy: 'nasir', …}

我想显示这个json对象如下:

Country Id: 1
Country Name: Bangladesh

等等。实际上，我需要在驼色大小写单词的每个大写字母处添加一个空格，并使第一个字母大写。在v3中怎么做呢?

我的尝试:

<table>
<tbody>
<tr v-for="(value, key) in data">
<th>{{ key }} </th>
<td>{{ value }}</td>
</tr>
</tbody>
</table>

Answer 1

我没有测试过这段代码。但是我将创建一个computed属性，它将根据数据中的键创建一个具有正确标签的对象:

const labels = computed(() => {
const newLabels = {}
data.forEach(item => {
Object.key(key => {
newLabels[key] = key.replace( /([A-Z])/g, " $1" );
}) 
})
return newLabels;
})

创建的对象应该是这样的:{countryId: 'country Id', countryName: 'country Name', ...}。它很灵活，因为它将遍历数据数组中的所有对象，收集和转换所有可能的键。当你有一个巨大的数组时，缺点可能是性能。如果data中对象的所有键都相同，您也可以手动创建一个labels对象。

现在你可以在你的模板中使用它:<th style="text-transform: capitalize;">{{ labels[key] }} </th>

我添加了将第一个字母转换为大写的样式。

如前所述，我没有机会测试这个，但我希望它能进一步帮助你。

Answer 2

您可以显示如下名称

<table>
<tbody>
<tr v-for="(value, key) in data">
<th v-if="key=='countryId'">Country Id</th>
<th v-if="key=='countryName'">Country Name</th>
...
<td>{{ value }}</td>
</tr>
</tbody>
</table>