[英]Get value in v-for loop into methods in vuejs
<form method="post" action="#" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="image-upload" v-for="(item, index) in uploadVal" :key="item._id">
<label class="btn btn-sm btn-success">
<a-icon type="upload" />Upload
<input
type="file"
ref="file"
accept="image/*"
@change="handleClickUpload"
style="display: none;"
/>
</label>
<div class="show-img">
<img :src="getImageURL(item.url)" />
</div>
</div>
</div>
</div>
</form>
In methods:在方法中:
methods: {
handleClickUpload(e) {
console.log(e.target.files);
},
}
I am doing upload image in vuejs.我正在 vuejs 中上传图片。 And I want to get the
index
value of the v-for loop under the handleClickUpload
of the methods.我想在方法的
handleClickUpload
下获取v-for循环的index
值。 Is there any way to get index
in handleClickUpload
?有没有办法在
handleClickUpload
中获取index
? Please give me ideas.Thanks请给我想法。谢谢
You can pass a function to it and pass the event
and index
externally as:您可以将 function 传递给它,并将
event
和index
从外部传递为:
<input
type="file"
ref="file"
accept="image/*"
@change="(e) => handleClickUpload(e, index)"
style="display: none"
/>
Live Demo现场演示
and get the index in the function handleClickUpload
as:并获取 function
handleClickUpload
中的索引为:
handleClickUpload(e, i) {
console.log(e.target.files);
console.log(i);
},
Try this:尝试这个:
@change="handleClickUpload($event, index)"
methods: {
handleClickUpload(e, i) {
console.log(e.target.files, i);
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.