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

<template>
  <article class="showroom">
    <section class="images" v-switcher>
      
      <!-- <figure v-html="item.field_visuels"></figure> -->
      <figure
        v-for="(img, index) in item.images"
        :key="img.url"
        class="lazy"
        v-lazy="index"
      >
        <img
          :data-src="img.style_showroomhome.url"
          @click="setLightBox(index)"
        />
      </figure>
    </section>
    <section class="content">
      <header>
        <h1>{{item.name}}</h1>
      </header>
      <section class="description" v-html="item.description" />
      <address>
        <span v-if="item.address.organization">{{ item.address.organization }}</br></span> 
        <span v-if="item.address.address_line1">{{ item.address.address_line1 }}</br></span> 
        <span v-if="item.address.locality">{{ item.address.locality }}</br></span> 
        <span v-if="item.country.country_name">{{ item.country.country_name }}</span>
      </address>
      <div class="phone" v-html="item.phone" />
      <a class="email" :href="'mailto:'+item.email" v-html="item.email" />
      <div class="website">
        <a _target="_blank" :href="item.website.url">{{ item.website.title }}</a>
      </div>
    </section>
  </article>
</template>

<script>
import { mapState, mapActions } from 'vuex'

// import JSONAPI from 'vuejs/api/json-axios'
import router from 'vuejs/route'

import cardMixins from 'vuejs/components/cardMixins'

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

export default {
  name: "Showroom",
  router,
  mixins: [cardMixins],
  props: ['item'],
  // data(){
  //   return {
  //     alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
  //   }
  // },
  computed: {
    ...mapState({
      coolLightBoxItems: state => state.Common.coolLightBoxItems,
      coolLightBoxIndex: state => state.Common.coolLightBoxIndex
    }),
  },
  methods:{
    ...mapActions({
      setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
      setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
    }),
    setLightBox (index) {
      this.setcoolLightBoxItems(this.item.images)
      this.setcoolLightBoxIndex(index)
    }
  }
}
</script>

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