项目场景：

一天一个坑，一个坑一天，今天是Uniapp中重新给data中的属性赋值，但是页面中的数据并没有实时更新，我们直接下一步....

错误代码如下：

/* 错误代码 */
methods: {
    changeTopBar: (id) => {
	    if (id === this.barSelected) return;
	    this.barSelected = id
	    console.log(this.barSelected);
    }
}

---

原因分析：

提示：不能使用箭头函数

我自我感觉是这里的this的指向问题，在编译的vue进行代码编译的时候如果使用es6的箭头函数的话，自我感觉这里的this是指向methods:  {} 这个对象的，而不是指向的模板中局部的Vue的this对象。如有错误，请各位大佬不吝赐教! [ 抱拳 ]

---

解决方案：

提示：直接将 箭头函数 改为 普通函数 即可

/* 写法1 */
methods: {
    changeTopBar: function(id) {
    	if (id === this.barSelected) return;
	    this.barSelected = id
	    console.log(this.barSelected);
    }
}

/* 写法2 */
methods: {
	changeTopBar(id) {
		if (id === this.barSelected) return;
		this.barSelected = id
		console.log(this.barSelected);
	}
}