forked from sagi/seepur
34 lines
724 B
Vue
34 lines
724 B
Vue
|
<template>
|
||
|
|
<!-- <div class="card"> -->
|
||
|
|
<div class="card-content">
|
||
|
|
<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 * as Moment from "moment";
|
||
|
|
let childAge;
|
||
|
|
export default {
|
||
|
|
name: "ChildCard",
|
||
|
|
props: ["child"],
|
||
|
|
created() {
|
||
|
|
this.childAge = Moment().diff(this.child.dob, "years");
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
childAge
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|