Maison >interface Web >js tutoriel >Comment obtenir l'index lorsque elementui et el-upload sont utilisés dans v-for
Cet article présente principalement comment obtenir un index lorsque elementui et el-upload sont utilisés dans v-for. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
<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 },
Remarque : La méthode getImageSuccess d'el-upload ne prend actuellement pas en charge d'autres paramètres, donc afin d'obtenir l'index de la liste, vous pouvez utiliser la méthode ci-dessus pour obtenir l'index en plaçant un p dans la couche externe d'el-upload, puis utilisez la méthode getImageSuccess Les opérations sur les données sont effectuées en fonction de l'index.
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Basé sur le format JSON data Introduction au plug-in simple de diaporama jQuery (jquery-slider)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!