Property or method "toJSON" is not defined on the instance but referenced during render.

2020-05-27 11:35:50

其实这并不是一个错误,这是一个提醒,网上又很多也遇到这样问题的,但并不是和我的一样。

有人遇到这样的问题: 参考地址  Property or method "toJSON" is not defined on the instance but referenced during render. Make sure t

    

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


一直有这个报错。说是属性或方法“tojson”不是在实例上定义的,而是在呈现过程中引用的。确保此属性为通过初始化属性,确保此属性在数据选项中或对于基于类的组件是活动的


最后发现我用了termid这个字段。定义的时候termid:'  ',但是赋值的时候termid=data.id ;但是这个dataid是个数字。最后接口需要字符类型的我又通过termid.toString()转为了字符。


所以初始化定义的数据类型和赋值的数据类型格式不一样时,就会出现这种错误了。


还有种错误我本来定义的是数组。但是最后传给后台的时候必须传字符串。我就把这个数组toSting了。这违背了我开始定义的数组。而赋值成了字符串。这个时候也会报这种错误。


也有人遇到这样的问题 参考地址 Vue错误——Property or method "toJSON" is not defined on the instance but referenced during render.


我的vue在注册过程中报了这个错误:


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.




而且影响了router的传值。


很奇怪的是引起这个问题的原因在于,在于在生命周期的created方法中报错:


  created() {

    console.log('created');

    console.log(this);

    // console.log('params:' + JSON.stringify(this.$route.params));

  },


一旦去掉console.log(this)就能解决这个问题


为什么会出现这个问题?后续研究研究


通过第二种,我发现了我的问题。我是先 

oElm = document.getElementById(id)

然后

console.info('eELM',oElm)

出现了错误。

这样大家应该心里明白了吧。





  • 2020-01-17 08:44:57

    vue keepalive 前进刷新后退不刷新终极解决方案

    另外,我们做路由的时候要有意的根据页面等级做出路由的长度 比如 /a是一级的页面/a/b是二级的页面,下面的文章大家也可以通过判断path的长度来计算rank值,不用有意自定了 这样做的好处有两点,一个就是前进刷新,后退不刷新,还有就是,如果我们做页面进出效果的时候也能排上用场。

  • 2020-01-17 15:28:24

    深入理解vue中的slot与slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。

  • 2020-01-17 21:20:06

    Nuxt重要点介绍和记录

    nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html。

  • 2020-01-17 21:21:42

    nuxtjs打包优化

    然后你再使用 npm run build 打包的时候,会弹出一个界面 当然了,它第一次出来的时候我立马关了,这啥玩意???别着急你慢慢的品,慢慢的看。 原来 这是打包后的JS,面积的大小就是体积的大小。这样我们一目了然的看到了到底那里大了

  • 2020-01-17 23:21:54

    webpack打包优化之外部扩展externals的实际应用

    使用vue-cli创建项目,使用webpack打包。其中,有一个webpack优化webpack.optimize.CommonsChunkPlugin,它会将node_modules中的必需模块提取到vendor文件中,项目开发中,增加第三方模块,比如element-ui、vue-echarts等,vendor的包都会增大。这个时候,就需要考虑减轻vendor包的大小,增加构建速度。我们可以使用webpack的外部扩展(externals)功能。

  • 2020-01-18 01:26:59

    anyProxy使用注意事项

    anyproxy-ca 运行这个命令,如果是mac电脑他会提醒你去通过证书。

  • 2020-01-18 08:54:06

    利用localStorage来处理你的Javascript脚本错误

    localStorage作为HTML5中的新特性,它的出现可以说对于前端性能体验来讲可以获得相当大的改善。存储一些用户经常用到而又不是涉及隐私和安全的东西,的确是一个非常好的选择。下面分享一下用localStorage来处理客户端代码错误的例子来了解一下它的用途吧。