<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>
