Vue2中v-for循环内@change函数无法动态传值问题

问题根源 #

你循环里的所有<input>都用了固定id revisionImage，对应的<label>的for属性也绑定了这个id。但DOM中id是唯一标识，不管点击哪个label，实际触发的都是第一个匹配该id的input，所以参数始终是第一个循环项的值。另外你的函数定义里有重复参数名c,c，这会导致参数覆盖，也需要修正。

解决方案 #

1. 给每个循环项的input生成唯一id，用循环的index或revision.id拼接即可，同时让label的for属性同步绑定这个动态id。
2. 修正函数的重复参数名，避免参数覆盖。

修改后的代码示例 #

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

函数定义修正：

submitRevision(orderId, revisionId, index, event) {
    alert(orderId);
}

这样每个label都能正确关联当前循环项的input，触发@change时传递的参数就会是当前项对应的动态值了。

内容的提问来源于stack exchange，提问作者Muhammad Adnan