英文:
Vujs and Vuetify Different Data Manipulation
问题
Sure, here is the translated code part:
<v-simple-table>
<thead>
<tr>
<th class="text-left">
<v-card-subtitle><strong>请假</strong></v-card-subtitle>
</th>
<th class="text-left">
<v-card-subtitle><strong>缺勤</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>
Is there anything else you need?
英文:
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>
答案1
得分: 1
以下是代码的中文翻译部分：
<template>
<v-simple-table>
<thead>
<tr>
<th class="text-left">
<v-card-subtitle>
<strong>请假</strong>
</v-card-subtitle>
</th>
<th class="text-left">
<v-card-subtitle>
<strong>缺席</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>
这是您提供的代码的中文翻译部分。
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论