项目场景:
一天一个坑,一个坑一天,今天是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);
}
}