【Bug日志】Vue computed 报错：Computed property was assigned to but it has no setter 错误原因分析与解决办法

╰+攻爆jí腚メ 2021-07-26 18:21 426阅读 0赞

# 【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` 错误。控制台报错如下：

![错误描述][20201014153334383.png_pic_center]

## 错误分析 ##

根据控制台错误提示，组件中定义的`computed`属性缺少`setter`,使用过`computed` 都应该知道，该错误提示通常发生在组件内为`computed`属性赋值的时候，如果没有显示的声明`setter`，控制台则会打印如上错误。那么顺着这个方向，继续排查错误。

1.  首先我的代码如下所示，确实没有显示的声明`setter`

computed:{ 
        num:function(){ 
    		return this.initnum
        }
      },

1.  其次检查代码中是否有给`num`进行赋值，第一次检查，好像整个代码逻辑从未操作过`num`属性，怎么会涉及到给`num`赋值呢？ 不管怎么疑惑，错误的确发生了。继续定位对`num`属性的操作，直到我看到`v-model="num"`。现在一切都解释得通了，正是`v-model`的双向绑定属性实现了对`num` 的赋值。

## 解决办法 ##

通过上面的分析，错误及原因已经找到，怎么解决就比较简单了，只需在声明`computed`属性时显示的声明`setter`即可。

*  更正后的代码如下

computed:{ 
        num:{ 
          get(){ 
            return this.initnum;
          },
          set(v) {  }
        }
      },

## 写在后面 ##

在 `setter` 里面可以实现自己的业务逻辑，参数 `v` 即是新的属性值 ，如果没有相关逻辑，则只需定义一个空的`seter` 即可。

--------------------

（完）

[20201014153334383.png_pic_center]: /images/20210726/d35b20d2715949ce91f83b6976b2c3a5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-cli3 报Computed property “xxx” was assigned to but it has no setter.

这种问题一般是area这个计算属性没有设置set方法导致该报错，因为在methods方法里面有对area赋值的操作。只要添加一个 set方法就可以解决此报错。 v-mod

旧城等待，/ 2023年06月05日 08:15/ 0 赞/ 30 阅读

相关 Vuex - Computed property “name” was assigned to but it has no setter

[https://www.cnblogs.com/yihan123/p/13675029.html][https_www.cnblogs.com_yihan123_p_1367

墨蓝/ 2023年01月16日 02:57/ 0 赞/ 183 阅读

相关解决Openstack验证报错 Details: There are no compute resource providers in the Placement service but there

解决Openstack部署过程openstack catalog list报错： Details: There are no compute resource provider

野性酷女/ 2023年01月13日 06:19/ 0 赞/ 144 阅读

相关 JPA Null value was assigned to a property of primitive type setter问题解决

问题描述： org.hibernate.PropertyAccessException: Null value was assigned to a property \[

深碍√TFBOYSˉ_/ 2023年01月12日 12:00/ 0 赞/ 139 阅读

相关 vuex报错：‘xxx’was assigned to but it has no setter.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxX

电玩女神/ 2022年11月17日 11:24/ 0 赞/ 135 阅读

相关 Computed property was assigned to but it has no setter

Vue中，计算属性默认只有`getter`，如果你在代码中尝试给你计算属性赋值(需要`setter`)，那么就会有如上的错误，即计算属性相当于是只读的。 // 以下计

﹏ヽ暗。殇╰゛Y/ 2022年10月30日 12:20/ 0 赞/ 23 阅读

相关 Null value was assigned to a property of primitive type setter of

Null value was assigned to a property of primitive type setter of \\\\\\\ 这个字段在数据库中

曾经终败给现在/ 2022年05月24日 06:10/ 0 赞/ 156 阅读

相关 Vue2.* computed property ' ' was assigned to but it has no setter.

场景分析解决场景 > 父组件传递了一个属性给子组件，子组件需要在完成某个动作之后，修改这个动作。当我

短命女/ 2022年05月20日 08:54/ 0 赞/ 165 阅读

相关对vue计算属性computed的setter与getter的理解

大家都知道computed简单的使用方法，这儿只分享一下setter和getter用法： setter：设置值时触发。 getter：获取值时触发，与setter是没有必然

柔光的暖阳◎/ 2022年02月02日 10:57/ 0 赞/ 498 阅读

相关【Bug日志】Vue computed 报错：Computed property was assigned to but it has no setter 错误原因分析与解决办法

【Bug日志】Vue computed 报错：Computed property was assigned to but it has no setter 错误原因分析与解决

╰+攻爆jí腚メ/ 2021年07月26日 18:21/ 0 赞/ 427 阅读