66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<section>
|
|
<base-card>
|
|
<h2>{{ fullName }}</h2>
|
|
<h3>${{ rate }}/hour</h3>
|
|
</base-card>
|
|
</section>
|
|
<section>
|
|
<base-card>
|
|
<header>
|
|
<h2>Interested? Reach out now!</h2>
|
|
<base-button link :to="coachContactLink">Contact</base-button>
|
|
</header>
|
|
<router-view></router-view>
|
|
</base-card>
|
|
</section>
|
|
<section>
|
|
<base-card>
|
|
<base-badge
|
|
v-for="area in areas"
|
|
:key="area"
|
|
:type="area"
|
|
:title="area"
|
|
></base-badge>
|
|
<p>{{ description }}</p>
|
|
</base-card>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['id'],
|
|
data() {
|
|
return {
|
|
selectedCoach: null
|
|
};
|
|
},
|
|
computed: {
|
|
rate() {
|
|
return this.selectedCoach.hourlyRate;
|
|
},
|
|
areas() {
|
|
return this.selectedCoach.areas;
|
|
},
|
|
description() {
|
|
return this.selectedCoach.description;
|
|
},
|
|
fullName() {
|
|
return this.selectedCoach.firstName + ' ' + this.selectedCoach.lastName;
|
|
},
|
|
coachContactLink() {
|
|
return this.$route.path + '/contact';
|
|
}
|
|
},
|
|
created() {
|
|
this.selectedCoach = this.$store.getters['coaches/coaches'].find(
|
|
coach => coach.id === this.id
|
|
);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|