seepur/resources/scripts/applications/home/components/Child_Card.vue

39 lines
861 B
Vue
Raw Normal View History

2020-03-17 22:16:34 +00:00
<template>
<!-- <div class="card"> -->
2020-04-12 14:25:42 +00:00
<div class="card-content has-pointer" @click="goToChild(child)">
2020-03-17 22:16:34 +00:00
<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">
2020-04-12 14:25:42 +00:00
import Moment from "moment";
2020-03-17 22:16:34 +00:00
let childAge;
export default {
name: "ChildCard",
props: ["child"],
2020-04-12 14:25:42 +00:00
methods: {
goToChild(child) {
this.$router.push({ path: `/child/${child.id}` });
}
},
2020-03-17 22:16:34 +00:00
created() {
this.childAge = Moment().diff(this.child.dob, "years");
},
data() {
return {
childAge
};
}
};
</script>