muntadas-app/src/components/Content.vue

<template>
  <div
    id="content"
    @click.prevent="close"
    @keydown.enter.prevent="close"
  >
    <div class="wrapper">
      <header>
        <span class="close-btn"
        @click.prevent="close"
        @keydown.enter.prevent="close"
        >x</span>
        <h1>{{ data.Name }}</h1>
      </header>
      <section>
        <div v-if="data.Text" class="text">
          {{ data.Text }}
        </div>
        <ul v-if="data.Media && data.Media.length">
          <li v-for="(item, index) in data.Media" :key="index">
            <img :src="'https://api.anarchive-muntadas.figli.io'+item.url" alt="">
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Content',
  props: {
    data: Object
  },
  data: () => ({

  }),
  created () {
    console.log('Content created', this.data)
  },
  methods: {
    close () {
      console.log('close content')
      this.$emit('onClose')
    }
  }
}
</script>

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