Discussion on: Vue/Nuxt Component Card

<template>
  <div class="column is-4 has-text-centered" :id="id">
    <div class="icon_block">
      <img
        :src="image.src"
        :alt="image.alt"
        :width="image.width"
        :height="image.height"
      />
    </div>
    <h4>{{ heading }}</h4>
    <a :href="link.url" target="_blank" :title="link.title">
      {{ link.anchor }}
    </a>
  </div>
</template>

<script>
export default {
  name: "ContactCard",
  props: {
    id: '',
    image: {
      src: '',
      alt: '',
      width: '',
      height: '',
    },
    heading: '',
    link: {
      url: '',
      title: '',
      anchor: ''
    },
  },
};
</script>

<template>
  <div class="footer_top">
    <div class="container">
      <div class="columns">
        <ContactCard
          v-for="contact in contacts"
          :key="contact.id"
          :image="contact.image"
          :src="contact.src"
          :alt="contact.alt"
          :width="contact.width"
          :height="contact.height"
          :heading="contact.title"
          :link="contact.link"
          :href="contact.url"
          :title="contact.title"
          :anchor="contact.anchor"
        ></ContactCard>
      </div>
    </div>
  </div>
</template>

<script>
import ContactCard from "~/components/ContactCard.vue";

export default {
  components: {
    ContactCard
  },
  data: function () {
    return {
      contacts: [
        {
          id: 1,
          image: {
            src: '/assets/svg/address.svg',
            alt: '######',
            width: 17,
            height: 30,
          },
          title: 'Address',
          link: {
            url: '######',
            title: '######',
            anchor: '######'
          }
        },
        {
          id: 2,
          image: {
            src: '/assets/svg/phone.svg',
            alt: '######',
            width: 34,
            height: 30,
          },
          title: 'Phone',
          link: {
            url: '######',
            title: '######',
            anchor: '######'
          }
        },
        {
          id: 3,
          image: {
            src: '/assets/svg/email.svg',
            alt: '######',
            width: 17,
            height: 30,
          },
          title: 'Email',
          link: {
            url: 'mailto:######',
            title: '######',
            anchor: '######'
          }
        },
      ]
    }
  }
};
</script>