Vue js 将事件和索引作为参数传递的问题 [英] Vue js issues with passing event and index as parameter
问题描述
我正在尝试显示用户可以通过单击并上传新图像来更改的图像列表.第一张图片将是默认的添加图片.我在将索引和事件发送到方法时遇到问题.如果我在html中显示照片的索引,它是正确的.但是,如果我将索引作为参数发送给方法,则它始终为 0.换句话说,我使用 {{index}} 会产生正确的索引,但我使用 console.log(index) 会产生 0.看一些建议.谢谢!
I am trying to display a list of images that users can change by clicking and uploading a new image. The first image is going to be a default add image. I am having issues sending both and index and an event to a method. If I display the index of the photo in the html, it is correct. But, if I send the index to the method as a parameter, it is always 0. In other words, my use of {{index}} produces the correct index, but my use of console.log(index) produces 0. Looking for some advice. Thanks!
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]);
}
},
推荐答案
作为一种解决方法,您可以将索引作为数据属性传递,
As a workaround, you can pass index as a data attribute instead,
<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 将事件和索引作为参数传递的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!