Home >Web Front-end >JS Tutorial >How to get index when elementui and el-upload are used in v-for
This article mainly introduces how to obtain index when elementui and el-upload are used in v-for. It has certain reference value. Now I share it with everyone. Friends in need can refer to it
<div v-for = 'item in list'> <div @click="getImageTypeIndex(index)"> <el-upload class="upload-demo" drag :action="uploadUrl" :headers = "{token : userToken}" //带用户token :on-success="getImageSuccess" //上传成功 :before-upload="beforeAvatarUpload" :show-file-list = "false" :on-error = "getImageError" > //若上传失败,可继续拖拽 <div v-show="!item.imageUrl"> <i class="el-icon-upload"></i> <p class="c8492A6 f14 upload-p">点击或拖拽 上传<span class="cFF8400">图片</span></p> <p class="c8492A6 f12 upload-p">只能上传 jpg/png 文件,且不超过500kb</p> </div> //若上传成功,展示图片 <img v-show="item.imageUrl" :src="imgUrl + '?fileId=' + item.imageUrl + '&token=' + userToken" alt="" height="180"> </el-upload> </div> </div>
// 获取当前index getImageTypeIndex:function (index) {this.uploadImageType = index //先在data里定义下,此处省略定义}, // 图片上传成功 getImageSuccess:function (res, file) { this.$message({ message: '上传成功!', type: 'success' }); this.list[this.uploadImageIndex].imageUrl = res.data.fileId //我这里是list里有 imageUrl 来存储图片id,展示的地方根据id自己拼url },
Remarks: The getImageSuccess method of el-upload does not currently support other parameters, so in order to obtain the index of the list, you can use the above method to get the index with a p in the outer layer of el-upload, and then use the getImageSuccess method to compare the data according to the index. operate.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Sphere flat throwing and color dynamic transformation effects implemented by jQuery and canvas
Based on JSON format data Introduction to the simple jQuery slideshow plug-in (jquery-slider)
The above is the detailed content of How to get index when elementui and el-upload are used in v-for. For more information, please follow other related articles on the PHP Chinese website!