38 lines
861 B
Vue
38 lines
861 B
Vue
<template>
|
|
<!-- <div class="card"> -->
|
|
<div class="card-content has-pointer" @click="goToChild(child)">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48">
|
|
<img class="is-rounded is-avatar" :src="child.avatar" :alt="child.name" />
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class>{{child.name}}</p>
|
|
<!-- <p class>{{childAge}}</p> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</template>
|
|
<script lang="ts">
|
|
import Moment from "moment";
|
|
let childAge;
|
|
export default {
|
|
name: "ChildCard",
|
|
props: ["child"],
|
|
methods: {
|
|
goToChild(child) {
|
|
this.$router.push({ path: `/child/${child.id}` });
|
|
}
|
|
},
|
|
created() {
|
|
this.childAge = Moment().diff(this.child.dob, "years");
|
|
},
|
|
data() {
|
|
return {
|
|
childAge
|
|
};
|
|
}
|
|
};
|
|
</script>
|