Computed property was assigned to but it has no setter

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

// 以下计算属性只用getter。即只能读取foo
computed: {
	foo() {
		return 'hello' + this.bar;
	}
}

// 尝试给foo赋值，会给出Computed property "foo" was assigned to but it has no setter
this.foo = 'hello baz';

可以思考一下，计算属性设计的目的是为了减少模板（template）中的逻辑判断。而模板中的逻辑绝大部分都是只读的。我们很少在模板去赋值。固计算属性并没有提供setter。

简单的解决这个问题，就是看一下代码中是否给计算属性赋值了。如果赋值了，就去掉。你可能会问，如果我就是想赋值呢？那么你需要知道计算属性应该通过修改其依赖的值从而间接的修改自己。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

如上，fullName是计算属性，这里显式的定义计算属性的getter和setter。

当给fullName赋值的时候，其实是通过给firstName和lastName分别赋值，进而实现修改fullName的目的。

这一点恐怕还要思考一下才能转过弯来。我举一个列子：公鸡和母鸡一起生了一个鸡蛋，但你觉得鸡蛋太小，想吃个鸭蛋。那么你是不能直接把鸡蛋换成鸭蛋的，你有想过公鸡和母鸡的感受么…事实上你应该养一对公鸭和母鸭去实现你的想法，即通过把鸡改成鸭子的方式，间接的把鸡蛋改成了鸭蛋…