for循环一个列表,列表中有上传图片组件时,点击一个上传组件,上传完图片后,change事件触发两次。
<li v-for="(item, index) in list" :key="index">
<div>
<div>1</div>
<div>2</div>
<div style="position:relative;">
<label for="upload" class="input-upload">
<input type="file" id="upload" multiple="multiple" style="display: none" accept="image/*" @change="change($event, item)" />
</label>
</div>
</div>
</li>
上面的代码在点击最后一个div,上传图片后,就会触发两次change事件。
原因是label通过for属性,跟input的id属性绑定在一起,即点击绑定的label,就跟点击到了input一样,会触发input的事件。不清楚的可以查一下lable的for属性作用。
所以当点击到列表中最后一个label时,它会找到对应的id为upload的input触发change事件,而列表中有多个一模一样的id="upload"的input,就会多次触发change回调。但实际现象只会触发两次,具体原因不得而知。
知道问题原因了就好解决了,避免多个label的for属性和input的id属性绑定在一起就行。
<li v-for="(item, index) in list" :key="index">
<div>
<div>1</div>
<div>2</div>
<div style="position:relative;">
<label :for="'upload'+index" class="input-upload">
<input type="file" :id="'upload'+index" multiple="multiple" style="display: none" accept="image/*" @change="change($event, item)" />
</label>
</div>
</div>
</li>