Display three rows of duplicated data in one row using vuetify v-data-table

See more:

Javascript

DataTable

vuejs

You can see two data tables in the attached photo. The first data table shows the same data in all three rows. I don't need the duplicated datas, so I want to remove the duplicated row of datas and make only one row of data. Please tell me what to do. Everyone Please help me.

This project uses the vuetify framework, and the code below is part of the "v-data-table"and "v-card" component. Perhaps if this part is fixed well, it will be possible to make a data table with only one row and header, but it may be necessary to fix the Javascript part as well.

What I have tried:

<pre>export default {
    data() {
      return {
        worker_time_card: [],
        calendarVal: null,
        headers1: [{
            text: 'Start Time',
            value: 'start_time'
          },
          {
            text: 'End time',
            value: 'end_time'
          },
          {
            text: 'Rest time',
            value: 'rest_time'
          },
          {
            text: 'Worked time',
            value: 'worked_time'
          },
        ],
        headers2: [{
            text: 'Project id',
            value: 'project_id'
          },
          {
            text: 'Duration',
            value: 'duration'
          },
          {
            text: 'Work log',
            value: 'work_log'
          }
        ],
      }
    },
    computed: {
      calendarDisp() {
        return this.calendarVal
      },
    },
    mounted() {
      this.calendarVal = this.getDataToday()
      this.fetchWorkerTimeCard()
    },
    methods: {
      getDataToday() {
        return (new Date().toISOString().substr(0, 10))
      },
      submit() {
        console.log(this.calendarVal)
      },
      async fetchWorkerTimeCard() {
        try {
          this.worker_time_card = []
          await this.$axios.$get('/worker_time_card', {
            params: {
              work_date: this.calendarVal
            }
          }).then(data => {
            data.time_cards.forEach(card =>
              this.worker_time_card.push({
                start_time: data.start_time,
                end_time: data.end_time,
                rest_time: data.rest_time,
                worked_time: data.worked_time,
                duration: card.duration,
                work_log: card.work_log,
                project_id: card.project_id,
              })
            )
          })
        } catch (error) {
          console.log(error)
          this.worker_time_card = []
        }
      },
    },
  }