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

<template>
  <!-- <div class="card"> -->
  <!-- <div class="card-content " > -->
  <article class="media has-pointer" @click="goToChild(child)">
    <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">
      <div class="content">
        <p class>{{child.name}}</p>
      </div>
      <!-- <p class>{{childAge}}</p> -->
    </div>
  </article>
  <!-- </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>