搞定！“Vue computed 报错：Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决方法

2022-11-07 10:25:48

解决 Vue Computed 属性“已分配但没有 setter”错误：终极指南

什么是 Computed 属性？

在 Vue.js 中，computed 属性是一个强大的特性，用于计算和跟踪基于其他响应式数据的派生值。它们就像只读属性，由 Vue 管理，每当依赖项更改时自动更新。

“已分配但没有 setter”错误的原因

当您尝试对 computed 属性进行赋值时，您可能会遇到“Computed property ‘ ‘ was assigned to but it has no setter”错误。这是因为 computed 属性本质上是只读的，它们不具有 setter 方法来更改其值。

解决方法

要解决此错误，您有以下几种选择：

使用 Vue.set() 方法

Vue.set() 方法允许您安全地设置响应式对象的属性值，即使该属性没有 setter。

// 使用 Vue.set() 更改 computed 属性的依赖项
Vue.set(this, 'count', this.count + 1)

使用自定义属性

您可以创建具有 setter 的自定义属性，并将其用作 computed 属性的依赖项。

// 创建一个带有 setter 的自定义属性
const myCustomProperty = {
  value: 0,
  set(newValue) {
    this.value = newValue
  }
}

// 在 computed 属性中使用自定义属性
computed: {
  doubleCount() {
    return myCustomProperty.value * 2
  }
}

将 Computed 属性声明为方法

您还可以将 computed 属性声明为方法，从而绕过 setter 限制。

// 将 computed 属性声明为方法
methods: {
  doubleCount() {
    return this.count * 2
  },
  incrementCount() {
    this.count++
  }
}

代码示例

以下是解决“已分配但没有 setter”错误的三种方法的代码示例：

示例 1：使用 Vue.set() 方法

// data() 定义初始状态
data() {
  return {
    count: 0
  }
},

// computed() 定义派生属性
computed: {
  doubleCount() {
    return this.count * 2
  }
},

// methods() 定义与状态交互的方法
methods: {
  incrementCount() {
    Vue.set(this, 'count', this.count + 1)
  }
}

示例 2：使用自定义属性

// data() 定义初始状态
data() {
  return {
    myCustomProperty: {
      value: 0
    }
  }
},

// computed() 定义派生属性
computed: {
  doubleCount() {
    return this.myCustomProperty.value * 2
  }
},

// methods() 定义与状态交互的方法
methods: {
  incrementCount() {
    this.myCustomProperty.value++
  }
}

示例 3：将 Computed 属性声明为方法

// data() 定义初始状态
data() {
  return {
    count: 0
  }
},

// methods() 定义派生属性和与状态交互的方法
methods: {
  doubleCount() {
    return this.count * 2
  },
  incrementCount() {
    this.count++
  }
}