el input遍历为什么会触发多次blur回调方法，blur不是只有失去焦点时才触发吗

Question

为什么@blur="blurInput()"这个方法会执行多次，blur不是失去焦点时才触发的吗，请问怎么遍历完input让它触发各自的blur方法

<el-col v-for="item in group.inspectionItemVoList" :key="1" :span="6">
    <el-form-item class="block" :label="item.name">
        <el-input v-model="item.formContentText" :value="item.formContentText" @blur="blurInput()">
        </el-input>
    </el-form-item>
</el-col>

Answer 1

请把唯一值赋给 key ，大概率是 你的 :key="1"的问题，这个要比:key="index"还要严重，强制让 vue 框架认为循环内部是一个组件。

还有，因为 @blur 不是原生方法，可以在 blurInput中加入唯一值，然后再方法中判断唯一值来进行操作。如 blurInput(item.id || 唯一值)

blurInput(id) {
    // 根据唯一值进行操作不同的操作
}

当然，也可以使用事件委托来执行，但是这个需要操作dom节点，且与 vue 事件绑定机制相违背。如果不是考虑数据量极大的情况下，无需采用这种方式。

请看博客:
VUE中演示v-for为什么要加key
利用 WeakMap 对 Vue 新建数组中的对象赋予 :key

有用请采纳，谢谢