监控 input 输入框 @input 获取输入数据报错:Cannot read property ‘detail’ of undefined at VueComponent

使用 input 输入框,通过 @input 事件,监听输入框输入的内容变化
uniapp 文档中
@input EventHandle 当键盘输入时,触发input事件,event.detail = {value}


问题描述

在监听输入框数据变化的时候报错

<input  @input="GD_input()" v-model:value="GDval" />
GD_input(event) {
	console.log(event) // undefined
	this.GDval = event.detail.value
	// this.GDval = event.target.value  用 target 也是可以的
},

报错

[system]TypeError: Cannot read property 'detail' of undefined at VueComponent.GD_input (webpack-internal:///IGl5:87:26)

在这里插入图片描述

原因分析:

测试在方法内输出 参数 event 得到 undefined
对照官方示例,发现在 html 中 @input=“GD_input()” 这里调用 GD_input() 是没有括号的,将括号去掉,发现可以了


解决方案:

<!--这里GD_input的括号去掉,就可以了-->
<input  @input="GD_input" v-model:value="GDval" />
GD_input(event) {
	console.log(event) 
	this.GDval = event.detail.value
	// this.GDval = event.target.value  用 target 也是可以的
},
Logo

前往低代码交流专区

更多推荐