【Bug日志】Vue computed 报错:Computed property was assigned to but it has no setter 错误原因分析与解决办法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
【Bug日志】Vue computed 报错:Computed property was assigned to but it has no setter 错误原因分析与解决办法
错误描述
最近在封装Vue组件时,借助Vue的Computed属性监听父组件传递到子组件的数据,但是开发调试过程中控制台取提示Computed property was assigned to but it has no setter
错误。控制台报错如下:
错误分析
根据控制台错误提示,组件中定义的computed
属性缺少setter
,使用过computed
都应该知道,该错误提示通常发生在组件内为computed
属性赋值的时候,如果没有显示的声明setter
,控制台则会打印如上错误。那么顺着这个方向,继续排查错误。
- 首先我的代码如下所示,确实没有显示的声明
setter
computed:{
num:function(){
return this.initnum
}
},
- 其次检查代码中是否有给
num
进行赋值,第一次检查,好像整个代码逻辑从未操作过num
属性,怎么会涉及到给num
赋值呢? 不管怎么疑惑,错误的确发生了。继续定位对num
属性的操作,直到我看到v-model="num"
。现在一切都解释得通了,正是v-model
的双向绑定属性实现了对num
的赋值。
解决办法
通过上面的分析,错误及原因已经找到,怎么解决就比较简单了,只需在声明computed
属性时显示的声明setter
即可。
- 更正后的代码如下
computed:{
num:{
get(){
return this.initnum;
},
set(v) { }
}
},
写在后面
在 setter
里面可以实现自己的业务逻辑,参数 v
即是新的属性值 ,如果没有相关逻辑,则只需定义一个空的seter
即可。
(完)
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)