在开发uniapp项目中,有时运行在微信小程序上测试会报错,报错信息是:[Vue warn]: Property or method “toJSON” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
1. 问题呈现
微信小程序开发工具上运行时报错,是这样的,如下截图所示
2. 定位问题
网上查了一下报错信息,大概知道解释的意思,但是没有用,先用排除法,把之前认为写过的可能有导致问题的代码注释掉,再运行试试,最后发现,应该是这里引起的,源代码如下
export default {
data() {
return {
//...
myComponent:null,
};
},
onReady() {
},
mounted() {
this.$nextTick(()=>{
console.log('myComponent',this.$refs.myComponent);//测试打印正常
//this.myComponent = this.$refs.myComponent;
})
},
}
💡 将上面那一行去掉注释后,运行会导致错误
[Vue warn]: Property or method "toJSON" is not defined on the ...
3. 问题解决
经过各种猜测,最后有一个可行的方法试了,发现只要注释某一行即可,代码如下
export default {
data() {
return {
//...
//myComponent:null,
};
},
onReady() {
},
mounted() {
this.$nextTick(()=>{
console.log('myComponent',this.$refs.myComponent);//测试打印正常
this.myComponent = this.$refs.myComponent;
})
},
}
又发现一个🕷,为什么会导致这样的问题呢,且容我卖个关子…😛,这是绑定变量引起的,是Vue
的特征,可有明白❓