Vue3中@change="func(param)"场景下如何传递input值到对应方法

解决方案 #

你当前代码存在两处可优化修正的点：

• 同时为el-input绑定了:value和v-model属性，二者功能重复冲突，v-model本身就是:value+输入事件的双向绑定语法糖，不需要额外声明:value
• ElementUI的el-input的change事件默认会返回输入框最新值，你也可以直接传入v-model绑定的变量来获取最新值，另外如果需要每次输入都实时触发回调，可以用@input事件，@change只有在输入框失焦时才会触发。

写法1：直接绑定行数据（适合修改表格行原数据的场景） #

<template slot-scope="scope">
    <el-input
    type="text"
    v-model="scope.row.name"
    @input="changeQueryName(scope.row.id, scope.row.name)">
    </el-input>
</template>

写法2：绑定独立变量存储查询名（适合不直接修改行原数据的场景） #

如果你的表格是多行输入，注意不要所有行共用同一个queryName变量，可以定义为对象按行id存储，避免互相影响：

<template slot-scope="scope">
    <el-input
    type="text"
    v-model="queryName[scope.row.id]"
    @input="changeQueryName(scope.row.id, queryName[scope.row.id])">
    </el-input>
</template>

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