90 lines
1.4 KiB
Vue
90 lines
1.4 KiB
Vue
<script setup>
|
|
const desserts = [
|
|
{
|
|
dessert: 'Frozen Yogurt',
|
|
calories: 159,
|
|
fat: 6,
|
|
carbs: 24,
|
|
protein: 4,
|
|
},
|
|
{
|
|
dessert: 'Ice cream sandwich',
|
|
calories: 237,
|
|
fat: 6,
|
|
carbs: 24,
|
|
protein: 4,
|
|
},
|
|
{
|
|
dessert: 'Eclair',
|
|
calories: 262,
|
|
fat: 6,
|
|
carbs: 24,
|
|
protein: 4,
|
|
},
|
|
{
|
|
dessert: 'Cupcake',
|
|
calories: 305,
|
|
fat: 6,
|
|
carbs: 24,
|
|
protein: 4,
|
|
},
|
|
{
|
|
dessert: 'Gingerbread',
|
|
calories: 356,
|
|
fat: 6,
|
|
carbs: 24,
|
|
protein: 4,
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VTable
|
|
height="250"
|
|
fixed-header
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-uppercase">
|
|
Desserts (100g Servings)
|
|
</th>
|
|
<th>
|
|
calories
|
|
</th>
|
|
<th>
|
|
Fat(g)
|
|
</th>
|
|
<th>
|
|
Carbs(g)
|
|
</th>
|
|
<th>
|
|
protein(g)
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr
|
|
v-for="item in desserts"
|
|
:key="item.dessert"
|
|
>
|
|
<td>
|
|
{{ item.dessert }}
|
|
</td>
|
|
<td class="text-center">
|
|
{{ item.calories }}
|
|
</td>
|
|
<td class="text-center">
|
|
{{ item.fat }}
|
|
</td>
|
|
<td class="text-center">
|
|
{{ item.carbs }}
|
|
</td>
|
|
<td class="text-center">
|
|
{{ item.protein }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
</template>
|