问题描述

当在vue.js中使用@click,@blur时报出[Vue warn]: Invalid handler for event “blur”: got undefined的三种可能问题

vue代码写错

methods写成method

HTML

<input type="text" v-model="username" @blur="check_username" name="username" id="user_name">

Vue

method: {
	check_username() {
		console.log(this.username)
	}
}

需将vue中的method改成methods

函数名不一致

HTML

<input type="text" v-model="username" @blur="check_username" name="username" id="user_name">

Vue

methods: {
	check_usename() {
		console.log(this.username)
	}
}

HTML中的@blur所指定的函数名与Vue中的methods里的函数不匹配

函数未在methods内

HTML

<input type="text" v-model="username" @blur="check_username" name="username" id="user_name">

Vue

methods: {
}
check_username() {
	console.log(this.username)
}

如代码所示check_username写在methods外同样也会报错

methods没有匹配到其他函数

HTML

<input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
<input type="text" v-model="password" @blur="check_password" name="password" id="pwd">

Vue

methods: {
	check_username() {
		console.log(this.username)
	}
}

由于在methods中并未含有check_password所以同样也会报错，但check_username依旧能正常运行（因为仅涉及控制台）但一旦涉及到修改网页元素，则无法正常渲染页面，同样这样子代码还会如下错误[Vue warn]: Property or method "check_password is not defind on the instance but referenced during render"你可以根据错误代码来识别你哪个函数还未填写或写错。

正确代码

HTML

<input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
<input type="text" v-model="password" @blur="check_password" name="password" id="pwd">

Vue

methods: {
	check_username() {
		console.log(this.username)
	},
	check_password() {
		console.log(this.password)
	}
}