Vue中给事件处理器传递额外参数时如何保留Event对象？

在Vue中，给事件处理器传递额外参数时，必须通过$event显式传递原生事件对象，否则方法里会无法获取到Event。

步骤1：修改模板的事件绑定 #

将原来的@change="imageChange"改为同时传递$event和index：

<div v-for="(image , index) in model.images" v-bind:key="index">
  <input accept="image/*" type='file' id="imgInp" @change="imageChange($event, index)" />
</div>

步骤2：修正事件方法 #

补全文件对象的获取逻辑，确保更新数组对应位置的值：

imageChange(e, index) {
  const file = e.target.files[0];
  console.log(`event ->`, e);
  console.log(`index ->`, index);
  // 确保文件存在再执行赋值操作
  if (file) {
    this.model.images[index] = URL.createObjectURL(file);
  }
}

关键说明 #

$event是Vue提供的特殊变量，用于在模板中传递原生DOM事件对象。当需要同时传递自定义参数（比如这里的index）时，必须在事件绑定中显式传入$event，方法才能正确接收到事件对象，避免出现undefined的情况。

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