50 lines
797 B
Vue
50 lines
797 B
Vue
<script lang="ts" setup>
|
|
const { obj = {} } = defineProps<{ obj: { [index: string]: unknown } }>()
|
|
</script>
|
|
|
|
<template>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Property</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="property in Object.keys(obj)" :key="property">
|
|
<td>
|
|
<span>{{ property }}</span>
|
|
</td>
|
|
<td>
|
|
<span>{{ obj[property] }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table {
|
|
background-color: white;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding: 0.25em 0.5em;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
td:first-child,
|
|
th:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
td:last-child span {
|
|
white-space: pre;
|
|
margin: 0.5em;
|
|
background: black;
|
|
color: white;
|
|
}
|
|
</style>
|