网小鱼Java的bug小集锦0026-Vue中事件绑定中methods方法绑定错误_vue method里面的方法绑定事件报错-CSDN博客

本文链接：https://blog.csdn.net/m0_55284524/article/details/116566710

这次“车祸现场”发生在学习Vue中事件绑定模块中关于方法绑定学习过程中，先来记录一下犯罪现场的代码以及后台截图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定操作</title>
	</head>
	
	<body>
		<div id="app">
			{{num}}
			<button v-on:click="num++">自增</button>
			<button @click="num++">简化自增写法</button>
			<button @click="addNum">自增方法自增</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					num:100
				},
				method:{
					addNum(){
						this.num++
					}
				}
			})
		</script>
	</body>
</html>

在进行测试的时候，显示截图如下：
在这里插入图片描述
根据上面页面显示情况可以看出：页面展示时没有问题的，点击前两个按钮测试也是可以通过的，但是第三个通过一个方法来实现自增的时候就出现了问题，打开测试的网页console控制台发现提示：Property or method “addNum” is not defined on the instance but referenced during render，提示：方法“addNum”不是在实例上定义的，而是在使用期间引用的。说明方法的定义有问题。

回去检查一下代码发现，里面的单词是固定写法methods不是method，害！白定义了半天，修改一下代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定操作</title>
	</head>
	
	<body>
		<div id="app">
			{{num}}
			<button v-on:click="num++">自增</button>
			<button @click="num++">简化自增写法</button>
			<button @click="addNum">自增方法自增</button>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					num:100
				},
				methods:{
					addNum(){
						this.num++
					}
				}
			})
		</script>
	</body>
</html>