[Vuejs]-Vue js @change parameters are always 0 when uploading a file by clicking on the picture

by

1👍

✅

The reason that item_index is always 0 is because the label you have set on the image is linked to the id slider-item-file-1 which has been set for every file input. An element should have a unique id, in your code you don’t so when you click the label it will always access the first occurrence of that id in the body hence you will always get an item_index of 0. If you made the ids dynamic this will fix your problem.

This is also why you will notice that when you click on the bottom image it jumps up to the top of the page because it’s going to the first file input with that id.

<label :for="'slider-item-file-' + parent_index + '-' + index + '-' + item_index">
      <img v-if="item.preview.length>1" :src="item.preview" width="160px" height="200px"/>
      <img v-else src="images/image6.png" width="160px" height="200px"/>
</label>
<input type="file" @change="onImageChange($event, parent_index, index, item_index)" :id="'slider-item-file-' + parent_index + '-' + index + '-' + item_index"/>

Each id will contain the index of each for loop.

Hope this helps

👤Hides

Leave a comment