Store two different key in one column on vue bootstrap-CodePudding

Hi everyone I'm doing this project where I'm going to store data into a table. The data itself is from a backend server with different table which have a different field name but meant to be stored in one same column on the front-end. The first data will be like:

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

And the second data will be like:

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

and this is the code I tried but obviously didn't work:

<template>
    <b-table>
        <template v-slot:cell(name)=data items="student_data" :fields="fields">
            <div  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>

How can I put both John doe and Jane Doe in one same column with their different field name? Thanks in advance

CodePudding user response：

You can simply achieve it by just iterating the array in mounted() hook and making the Object keys with same name.

Live Demo :

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/[email protected]/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 >
    <template>
      <div>
        <b-table striped hover :items="items"></b-table>
      </div>
    </template>
  </b-container>
</div>