Question

我正在尝试显示用户可以通过点击和上传新图片来更改的图片列表。第一张图片将成为默认的添加图片。我在向方法发送和索引以及事件时遇到问题。如果我在html中显示照片的索引，那就是正确的。但是，如果我将索引作为参数发送给方法，它总是为0.换句话说，我使用{{index}}会生成正确的索引，但是我对console.log（index）的使用产生了0.一些建议。谢谢！

HTML：

<v-layout v-bind="binding">
     <v-flex v-for="(image, index) in imageData">
       <v-card  style="margin:10%;">
         {{index}}
         <label for="imgload">
           <v-card-media :src="image" v-if="imageData.length > 0"></v-card-media>
         </label>
         <input hidden id="imgload" type="file" @change="previewImage($event, index)" accept="image/*">
       </v-card>
     </v-flex>
   </v-layout>

方式：

previewImage: function(event, index) {
     this.toggle="false";
     var input = event.target;
     if (input.files && input.files[0]) {
         var reader = new FileReader();
         reader.onload = (e) => {
           console.log(index);
           if (index == 0) {
             this.imageData.push(e.target.result);
           } else {
            this.imageData[index] = e.target.result;
           }
         }
         reader.readAsDataURL(input.files[0]);
     }
   },

Answer 1

作为一种变通方法，您可以将index作为数据属性传递，

<input hidden id="imgload" type="file" @change="previewImage($event)" accept="image/*" :data-index="index">

并在您的方法中，使用event.target.dataset.index

获取索引

previewImage: function(event) {
    const index = event.target.dataset.index;
    //...

           console.log(index);
    //...
   }

Vue js将事件和索引作为参数传递问题

1 个答案: