Maison >interface Web >js tutoriel >Comment obtenir l'index lorsque elementui et el-upload sont utilisés dans v-for

Comment obtenir l'index lorsque elementui et el-upload sont utilisés dans v-for

不言
不言original
2018-07-05 17:22:363659parcourir

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 = &#39;item in list&#39;>
  <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 + &#39;?fileId=&#39; + item.imageUrl + &#39;&token=&#39; + userToken" alt="" height="180">
                      </el-upload>
                    </div>
</div>
.
//      获取当前index
getImageTypeIndex:function (index) {this.uploadImageType = index  //先在data里定义下,此处省略定义},



 //      图片上传成功
getImageSuccess:function (res, file) {
        this.$message({
          message: &#39;上传成功!&#39;,
          type: &#39;success&#39;
        });
     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 :

Lancer à plat de sphères et effets de transformation dynamique des couleurs obtenus avec jQuery et Canvas

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn