Patrick Toal
a409b0a5c7
All checks were successful
Build BAB Application Deployment Artifact / build (push) Successful in 2m13s
38 lines
899 B
Vue
38 lines
899 B
Vue
<template>
|
|
<div v-if="boats">
|
|
<q-card
|
|
v-for="boat in boats"
|
|
:key="boat.id"
|
|
class="q-ma-sm">
|
|
<q-card-section>
|
|
<q-img
|
|
:src="boat.imgSrc"
|
|
:fit="'scale-down'">
|
|
<div class="row absolute-top">
|
|
<div class="col text-h6 text-left">{{ boat.name }}</div>
|
|
<div class="col text-right">{{ boat.class }}</div>
|
|
</div>
|
|
</q-img>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<!-- <q-card-actions align="evenly">
|
|
<q-btn flat>Info</q-btn>
|
|
<q-btn flat>Book</q-btn>
|
|
<q-btn flat>Check-Out</q-btn>
|
|
<q-btn flat>Check-In</q-btn>
|
|
</q-card-actions> -->
|
|
</q-card>
|
|
</div>
|
|
<div v-else><q-card>Sorry, no boats to show you!</q-card></div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Boat } from 'src/stores/boat';
|
|
|
|
defineProps({
|
|
boats: Array<Boat>,
|
|
});
|
|
</script>
|