<form method="post" action="#" enctype="multipart/form-data"> <div class="row"> <div class="col-md-12"> <div class="image-upload" v-for="(item, index) in uploadVal" :key="item._id"> <label class="btn btn-sm btn-success"> <a-icon type="upload" />Upload <input type="file" ref="file" accept="image/*" @change="handleClickUpload" style="display: none;" /> </label> <div class="show-img"> <img :src="getImageURL(item.url)" /> </div> </div> </div> </div> </form>En métodos:
methods: { handleClickUpload(e) { console.log(e.target.files); }, } Estoy cargando una imagen en vuejs. Y quiero obtener el valor de index del bucle v-for bajo el handleClickUpload de los métodos. ¿Hay alguna forma de obtener index en handleClickUpload ? Por favor dame ideas. Gracias.
Prueba esto:
@change="handleClickUpload($event, index)" methods: { handleClickUpload(e, i) { console.log(e.target.files, i); }, }Puede pasarle una función y pasar el event y el index externamente como:
<input type="file" ref="file" accept="image/*" @change="(e) => handleClickUpload(e, index)" style="display: none" />Demo en vivo
y obtenga el índice en la función handleClickUpload como:
handleClickUpload(e, i) { console.log(e.target.files); console.log(i); },