Vujs and Vuetify Different Data Manipulation

Question

I want to manipulate data from different table (mariadb) in the same database, but idk how to make it good. It work with only single data but when there is more than 1 data it push it to right, and I want to make it vertically... Someone have a solution ? :-)

<v-simple-table >
  <thead>
    <tr>
      <th class="text-left">
        <v-card-subtitle><strong>Congé</strong></v-card-subtitle></th>
      <th class="text-left">
        <v-card-subtitle><strong>Absence</strong></v-card-subtitle></th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td v-for="conge in conges" :key="conge.id">
        {{ conge.dateDebut }}  à  {{ conge.dateFin}}
      </td>
      <td v-for="absence in absences" :key="absence.id">
        {{ absence.dateDebut }}  à  {{ absence.dateFin }}
      </td>
    </tr>
  </tbody>
</v-simple-table>

Answer 1

you can try this code :

<template>
  <v-simple-table>
    <thead>
      <tr>
        <th class="text-left">
          <v-card-subtitle>
            <strong>Congé</strong>
          </v-card-subtitle>
        </th>
        <th class="text-left">
          <v-card-subtitle>
            <strong>Absence</strong>
          </v-card-subtitle>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(data, index) in mergedData" :key="index">
        <td>{{ data.conge.dateDebut }}  à  {{ data.conge.dateFin }}</td>
        <td>{{ data.absence.dateDebut }}  à  {{ data.absence.dateFin }}</td>
      </tr>
    </tbody>
  </v-simple-table>
</template>

<script>
export default {
  data() {
    return {
      mergedData: []
    };
  },
  computed: {
    absences() {
      return [
        { id: 1, dateDebut: "2022-01-01", dateFin: "2022-01-02" },
        { id: 2, dateDebut: "2022-01-03", dateFin: "2022-01-04" }
      ];
    },
    conges() {
      return [
        { id: 1, dateDebut: "2022-02-01", dateFin: "2022-02-02" },
        { id: 2, dateDebut: "2022-02-03", dateFin: "2022-02-04" }
      ];
    }
  },
  created() {
    for (let i = 0; i < this.conges.length; i++) {
      this.mergedData.push({
        conge: this.conges[i],
        absence: this.absences[i]
      });
    }
  }
};
</script>