<template>
  <v-carousel>
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item"
      reverse-transition="fade-transition"
      transition="fade-transition"
    >
       <v-row class="fill-height" align="center" justify="center">
        <div class="display-3">Title</div>
      </v-row>

      <!-- <div class="display-3 pa-4">Title</div> -->
    </v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
  props: {
    data: Object
  },

  computed: {
    items() {
      // Returns an array with all the imageX fields

      // Iterate data where key === image__ and return the value;
      let filtered_keys = (obj, filter) => {
        let key,
          keys = []
        for (key in obj)
          if (obj.hasOwnProperty(key) && filter.test(key)) keys.push(key)
        return keys
      }

      const keys = filtered_keys(this.data, /img_carousel_/)

      return keys.map(key => {
        if (this.data[key]) return this.data[key]
        return null
      })
    }
  }
}
</script>