0
290
ViewsGet 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. And I want to get the index value of the v-for loop under the handleClickUpload of the methods. Is there any way to get index in handleClickUpload ? Please give me ideas.Thanks
·
Santiago Trujillo
2 answers
Answer question0
Try this:
@change="handleClickUpload($event, index)"
methods: {
handleClickUpload(e, i) {
console.log(e.target.files, i);
},
}
·
Santiago Trujillo
Report
0
You can pass a function to it and pass the event and index externally as:
<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:
handleClickUpload(e, i) {
console.log(e.target.files);
console.log(i);
},
·
Santiago Trujillo
Report
Answer question