Store two different key in one column on vue bootstrap

Question

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 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>

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

Answer 1

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/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>