el-input-number @input.native触发,修改值失效

需求要求,输入就能触发校验,此处没用表单的rule的校验;

试过在方法里用this.$set()、this.$next(()=>{})没生效 , 甚至@change也没效果(点任意处, 才能触发,不符合需求的要求)

解决方案:如下,用@input.native

### el-input 组件中 `@keyup.native` 事件修饰符的使用 在 Vue.js 中,对于像 `el-input` 这样的组件,如果想要监听原生 DOM 事件(如键盘按键),可以使用 `.native` 修饰符来绑定这些事件。这允许开发者处理来自子组件内部元素触发的事件。 #### 使用场景 当需要响应特定键位被按下的情况,比如回车键 (`Enter`) 或其他功能键,可以通过组合 `@keyup` 和相应的键名实现精确控制。例如,在表单提交或命令执行的情况下非常有用[^1]。 #### 实现方式 通过在模板中的标签上添加带有 `.native` 的指令,可以直接捕获到该组件根节点上的所有冒泡阶段发生的指定类型的键盘事件: ```html <el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue" :ref="$index" size="small" @keyup.enter.native="handleInputConfirm(row,$index)" @blur="handleInputConfirm(row,$index)"> </el-input> ``` 上述代码片段展示了如何利用 `@keyup.enter.native` 来监听输入框内的 Enter 键按下动作,并调用相应的方法进行后续逻辑处理[^2]。 #### 完整示例 下面是一个更完整的例子,它不仅包含了基本结构还加入了简单的 JavaScript 方法用于展示实际效果: ```javascript // 假设这是在一个Vue实例内定义的方法部分 methods: { handleInputConfirm (row, index) { console.log(`Row at position ${index} confirmed with value:`, row.inputValue); // 清除当前行的内容并隐藏输入框 this.$set(this.rows[index], 'inputValue', ''); this.$set(this.rows[index], 'inputVisible', false); // 可能还需要做更多事情... } } ``` 此段脚本会在每次确认操作发生打印出对应的信息至浏览器控制台,并重置相关字段的状态以便下次交互。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值