[vue报错]之Computed property "XXX" was assigned to but it has no setter.
首先定位可以知道的是:在使用computed的时候出现的问题:这里提示我们需要使用setter, 我也是一脸懵逼, 什么是setter, computed为什么需要setter, 和我有什么关系, 带着这个疑问我们打开vue 的官网,毕竟遇到问题, 先看官网文档我们发现: vue 关于 computed的说明明确一点的是, computed中, 可以设置两个属性, 一个get , 一...
首先定位可以知道的是:
- 在使用computed的时候出现的问题:
这里提示我们需要使用setter, 我也是一脸懵逼, 什么是setter, computed为什么需要setter, 和我有什么关系, 带着这个疑问我们打开vue 的官网,
毕竟遇到问题, 先看官网文档
我们发现: vue 关于 computed的说明
明确一点的是, computed中, 可以设置两个属性, 一个get , 一个set ,
默认只传 get 进去, (这里还可以l联系到objectDefinePropety)
一个是读取, 一个修改设置
刚开始我对两个东西也是一脸的懵逼,
但是看完了下面这个例子, 我相信你会有进一步的了解
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取, 计算属性的 getter
aDouble: function () {
return this.a * 2
},
// 读取和设置, 计算属性的 getter 和 setter
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2 走get
vm.aPlus = 3 //走 set
vm.a // => 2
vm.aDouble // => 4
当你对计算属性进行赋值的时候就就是使用了 set属性来进行赋值,但是赋值后的操作是我们定的, 他会自动执行,
所以, 在set中我们会传入一个新值作为参数
回到题目:
这里报错, 我们大致是对计算属性,进行了赋值一类的操作,但是有没有在set属性声明, 所以会报这个错, 所以我们需要在set中完成即可,
另一个发现 ,如果使用存在数组方法,不会报错:
例如 , 你之前可能使用这个计算属性, 直接this.list =this.listData
(这样绝对会报错),
但是你使用this.list.push(...this.listData)
,即是不用声明set, 也不会报错(猜想可能是vue中重写数组方法的原因)
注: 值得一提的是在 使用 watch 来进行监听的时候 , 我们也是传入 两个参数一个(newOne, oldOne)
,
newOne,参数是不是有点对应 computed set 的意思
这篇博客也有点东西的: 参考
更多推荐
所有评论(0)