ModelCard.vue

<template>
  <a class="box" v-on:click="onClick">
    <article class="media">
      <figure></figure>
      <div class="media-content">
        <div class="content">
          <p>
            <strong>{{model.name}}</strong>
            <br>
            <small>{{model.author.username}}</small> - <small>{{new Date(model.modificationDate).toLocaleDateString()}}</small>
            <br>
            {{model.shortDescription}}
          </p>
          <b-taglist>
            <b-tag v-for="tag in model.tags" v-bind:key="tag.name" type="is-info">{{tag.name}}</b-tag>
          </b-taglist>
        </div>
      </div>
      <div class="media-right">
        <h2 class="title is-4">{{model.votes}} votes</h2>
      </div>
    </article>
  </a>
</template>

<script>
export default {
  name: 'ModelCard',
  props: ['model'],
  methods: {
    onClick () {
      this.$router.push({ name: 'Model', query: { id: this.model.id } })
    }
  }
}
</script>

<style>
.box {
  margin-bottom: 10px;
}
</style>