materio-d8/web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue

<template>
  <article class="card article">
    <header>
      <h1>
        <a
          :href="item.view_node"
          @click.prevent="onclick"
          v-html="item.title"
        ></a>
      </h1>
      <aside v-html="item.created"></aside>
      <h4 v-if="false" class="body" v-html="item.body"></h4>
    </header>
    <section class="images">
      <figure v-if="item.field_title_image !== ''" v-html="item.field_title_image"></figure>
      <figure v-else-if="item.field_visuel !== ''" v-html="item.field_visuel"></figure>
    </section>
  </article>
</template>

<script>
import { JSONAPI } from 'vuejs/api/json-axios'
import router from 'vuejs/route'

let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;

export default {
  name: "ArticleCard",
  router,
  props: ['item'],
  data(){
    return {
      alias: this.item.view_node.replace(/^.?\/blabla\//g, '')
    }
  },
  methods:{
    onclick(){
      console.log('clicked on article', this.alias);
      this.$router.push({
        name:`article`,
        params: { alias:this.alias },
        query: { uuid: this.item.uuid }
        // meta: { uuid:this.item.uuid },
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>