<template> <article class="card linkedmaterialcard"> <header @click.prevent="openModalCard" > <h1>{{ item.title }}</h1> <h4>{{ item.short_description }}</h4> <span v-if="isloggedin" class="ref">{{ item.reference }}</span> </header> <nav class="tools"> </nav> <section class="images" v-switcher> <figure v-for="(img, index) in item.images" :key="img.url" > <img class="lazy" v-lazy="index" :data-src="img.style_linkedmaterialcard.url" :title="img.title" /> <img class="blank" :src="blanksrc" @click.prevent="openModalCard" /> </figure> </section> </article> </template> <script> import { mapState, mapActions } from 'vuex' import cardMixins from 'vuejs/components/cardMixins' import ModalCard from 'vuejs/components/Content/ModalCard' export default { name: "LinkedMaterialCard", props: ['item'], mixins: [cardMixins], // components: { // ModalCard // }, data() { return { blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`, loadingItem: false } }, computed: { ...mapState({ isloggedin: state => state.User.isloggedin }) }, methods: { itemIsLoading(id) { return this.loadingItem }, openModalCard (e) { console.log('openModalCard', this.isLoggedin) if (this.isloggedin) { this.$modal.show( ModalCard, { item: this.item }, { name: `modal-${this.item.id}`, draggable: false, maxWidth: 850, maxHeight: 610, width: '95%', height: '95%' } ) } } } } </script> <style lang="scss" scoped> </style>