v-for in vue 2 could not pass values dynamically to @change function-CodePudding

In vue2, I have used v-for on a div and there is a button with a function in that div. passing values to that function are not dynamic.

Have a look on my code. I am working in vue2.

<div  v-for="(revision, index) in singleOrder.revisions" :key="index">
    <div  :data-rvv="revision.id" v-if="revision.status == 'Payment Done'">
        <div >
            
            <input  style="display:none" multiple accept="image/*,video/*"
                   @change="submitRevision(singleOrder.id,revision.id,index,$event)" type="file" name="fileinputnew"
                   id="revisionImage">
            <label for="revisionImage" >
                Submit Drawing
            </label>
        </div>
    </div>
</div>

submitRevision(a,b,c,c){ alert(a) }

alert always prints the first one div's singleOrder.id value and could not change dynamically for each.

CodePudding user response：

It happens because you use the same ID on the different html elements. It is not recommended. Discussion about ID.

Solution:
:id="`revisionImage${revision.id}`"
:for="`revisionImage${revision.id}`"

Be sure that revision.ids are unique

Try this:

<div  v-for="(revision, index) in singleOrder.revisions" :key="index">
    <div  :data-rvv="revision.id" v-if="revision.status == 'Payment Done'">
        <div >
            
            <input  style="display:none" multiple accept="image/*,video/*"
                   @change="submitRevision(singleOrder.id,revision.id,index,$event)" type="file" name="fileinputnew"
                   :id="`revisionImage${revision.id}`">
            <label :for="`revisionImage${revision.id}`" >
                Submit Drawing
            </label>
        </div>
    </div>
</div>```