在vue引导程序的一列中存储两个不同的密钥

Question

大家好，我正在做这个项目，我将把数据存储到一个表中。数据本身来自具有不同表的后端服务器，这些表具有不同的字段名称，但本应存储在前端的同一列中。第一个数据如下：

{
student_name: "John Doe",
birthday: "Aug, 4 2008"
}

第二个数据是这样的：

{
name: "Jane Doe",
birthday: "Dec, 25 2003"
}

这是我尝试过但显然没有成功的代码：

<template>
<b-table>
<template v-slot:cell(name)=data items="student_data" :fields="fields">
<div class="text-truncate" style="max-width: 150px;">
{{data.name}}
</div>
</template>
</b-table>
</template>
<script>
export default {
data(){
return {
student_data: [
{
student_name: "John Doe",
birthday: "Aug, 4 2008"
},
{
name: "Jane Doe",
birthday: "Dec, 25 2003"
},
],
fields: [
{
key: "no",
label: "No",
sortable: false
},
{
key: ["student_name", "name"],
label: "Name",
sortable: true
},
{     
key: "birthday",
label: "Birthday",
sortable: true
}, 
]                                         
}
}
}
</script>

如何将John doe和Jane doe放在同一列中，并使用不同的字段名称？提前感谢

Answer 1

只需在mounted()钩子中迭代数组，并使Object键具有相同的name，就可以实现这一点。

实时演示：

new Vue({
el: '#app',
data: {
items: [
{
student_name: "John Doe",
birthday: "Aug, 4 2008"
},
{
name: "Jane Doe",
birthday: "Dec, 25 2003"
}
]
},
mounted() {
this.items.forEach(obj => {
if (obj.hasOwnProperty('name')) {
obj['student_name'] = obj['name'];
delete obj['name'];
}
})
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.common.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css"/>
<div id="app">
<b-container class="mt-2">
<template>
<div>
<b-table striped hover :items="items"></b-table>
</div>
</template>
</b-container>
</div>