[Vuejs]-Multiple image preview using V-for when uploading (Vue JS)

by

0👍

Improve your architecture by splitting your logic into two components. You can do this like this:

<template>
  <div class="parent-component">
    <image-component :image="image" v-for="(image, index) in images" :key="index" />
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  data () {
    return {
      images: []
    };
  }
};
</script>

<template>
  <div class="image-component">
    <img ref="imgElement">
    {{ image.name }}
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    image: {
      type: Object,
      required: true
    }
  },
  methods: {
    ...
  },
  mounted () {
    // you don't have to loop here, because in the scope of the image-component,
    // you only have one `<img>`-tag. the loop is in the parent component
    console.log(this.$refs.imgElement);
  }
};
</script>

Leave a comment