0

I am using v-for to loop through an array of objects. The list has a file input inside. On the change event of the file input, I am calling a method with a parameter. The problem is that the parameter value is not getting changed the same value is getting passed in all the file inputs.

<li v-for="(item, index) in this.ailment_details_form.items" :key="item.id">
                                            <input type="file" v-on:change="handleFileUpload(item.id)" />
                                            <label>@{{ item.id }}</label>
                                        </li>

This is the method.

handleFileUpload(i) {
    console.log(i);
    }

Below is the data.

ailment_details_form: {
            details: '',
            items: [
                { id: 1, text: "Item 1" },
                { id: 2, text: "Item 2" },
                { id: 3, text: "Item 3" }],
            files: [],
            urls: []
        }

Here item.id in handleFileUpload() method is always showing as 1. Where as inside label it is showing correctly. Please help.

Akhilesh
  • 1,243
  • 4
  • 16
  • 49
  • 1
    Here you can see this error is not reproducible from the code shown: https://jsfiddle.net/sh0ber/vgy1b0a2/ – Dan Dec 18 '20 at 18:41
  • @Akhilesh - It seems to work fine in this [sandbox](https://codesandbox.io/s/so-vuejs-same-value-getting-passed-into-method-2l6dl?file=/src/App.vue) – marsnebulasoup Dec 18 '20 at 18:41
  • Does this answer your question? [VueJS: Input file selection event not firing upon selecting the same file](https://stackoverflow.com/questions/54124977/vuejs-input-file-selection-event-not-firing-upon-selecting-the-same-file), reset your uploader on each click – 4givN Dec 18 '20 at 19:02
  • @Dan Yes. The code is correct. But somehow it is showing this odd behaviour in my application. – Akhilesh Dec 19 '20 at 11:55
  • @marsnebulasoup Yes. But not working in my application. Don't know how to debug that. – Akhilesh Dec 19 '20 at 11:56
  • 1
    We can't reproduce it to identify the cause. You could try posting your whole app to https://codesandbox.io – Dan Dec 19 '20 at 14:54
  • 1
    @Dan I was able to fix the issue. The problem was with the label tag. The click event was fired by the label. It had the for attribute with same value. Thanks for your help. – Akhilesh Dec 19 '20 at 16:37

0 Answers0