seepur/resources/scripts/applications/home/components/Child_Card.vue
2020-04-12 10:25:42 -04:00

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>