Vue watch 中 this 注意事项

在watch中使用this要注意，不能用箭头函数，否则会出错，例如：<template></template><script>export default{data(){return {isLogin: false}},watch:{isLogin: (newVal, oldVal) => {newVal && this.updateLog

夜跑者

8794人浏览 · 2021-03-26 14:19:49

夜跑者 · 2021-03-26 14:19:49 发布

在watch中使用this要注意，不能用箭头函数，否则会出错，例如：

<template>
</template>

<script>
	export default{
		data(){
			return {
				isLogin: false
			}
		},
		watch:{
			isLogin: (newVal, oldVal) => {
				newVal && this.updateLogin()
			}
		},
		methods:{
			updateLogin(){
				console.log(`update login`)
			}
		}
	}
</script>

<style scoped>
</style>

箭头函数要改为function的形式，如下：

<template>
</template>

<script>
	export default{
		data(){
			return {
				isLogin: false
			}
		},
		watch:{
			isLogin: function(newVal, oldVal) {
				newVal && this.updateLogin()
			}
		},
		methods:{
			updateLogin(){
				console.log(`update login`)
			}
		}
	}
</script>

<style scoped>
</style>

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐