How can I display image by image uploaded on the vue component?

Question

My code like this :

<div id="app">
  <div v-for="item in items">
    <div v-if="!image">
      <h2>Select an image</h2>
      <input type="file" @change="onFileChange">
    </div>
    <div v-else>
      <img :src="image" />
      <button @click="removeImage">Remove image</button>
    </div>
  </div>
</div>

Demo and full code like this : https://codepen.io/moschel26/pen/jwdMgp

There are 5 input files. I want when I upload the image on the input file 3 then the image is only shown on the img 3. when I upload the image on the input file 5 then the image is only shown on the img 5. etc

How can i do that?

Answer 1

You should make array of objects to set uploaded images.

<div id="app">
  <div v-for="item in items">
    <div v-if="!item.image">
      <h2>Select an image</h2>
      <input type="file" @change="onFileChange(item, $event)">
    </div>
    <div v-else>
      <img :src="item.image" />
      <button @click="removeImage(item)">Remove image</button>
    </div>
  </div>
</div>

Full example here: https://codepen.io/emils/pen/VWgpaJ