【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 错误原因分析与解决办法

错误描述

最近在封装Vue组件时，借助Vue的Computed属性监听父组件传递到子组件的数据，但是开发调试过程中控制台取提示Computed property was assigned to but it has no setter 错误。控制台报错如下：

错误分析

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

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

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

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

解决办法

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

• 更正后的代码如下

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

写在后面

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

---

（完）