[vue报错]之Computed property "XXX" was assigned to but it has no setter.

首先定位可以知道的是:

  • 在使用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 的意思

这篇博客也有点东西的: 参考

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值