Vue3 报错：computed value is readonly 解决方案

这个报错的核心原因：computed 计算属性是只读的 ，你直接尝试给它赋值（比如 xxx = ''）就会触发这个错误。

结合你的场景：触发函数后要把值清空，我给你最直接、最简单的 2 种解决方案（Vue3 + 组合式API）。

先看错误示例（你现在的代码）

vue 复制代码

<script setup>
import { computed, ref } from 'vue'

const list = ref([1,2,3])
// 计算属性是只读的！
const computedList = computed(() => list.value)

// 点击清空 → 报错：Write operation failed: computed value is readonly
const clear = () => {
  computedList.value = []  // ❌ 错误：直接修改 computed
}
</script>

正确解决方案（2 选 1）

方案 1：直接修改 computed 依赖的原始值（推荐）

computed 的值来自原始响应式数据 ，你清空原始值即可，计算属性会自动更新。

vue 复制代码

<script setup>
import { computed, ref } from 'vue'

// 原始响应式数据
const list = ref([1,2,3])
const computedList = computed(() => list.value)

// 正确：修改原始值
const clear = () => {
  list.value = []  // ✅ 正确
}
</script>

<template>
  <button @click="clear">清空</button>
</template>

方案 2：使用可写的 computed（writable computed）

如果你必须直接给计算属性赋值 ，就用可写计算属性 ，手动实现 get 和 set。

vue 复制代码

<script setup>
import { computed, ref } from 'vue'

const list = ref([1,2,3])

// 可写计算属性
const computedList = computed({
  get: () => list.value,  // 读取时返回原始值
  set: (val) => {  // 赋值时自动执行
    list.value = val
  }
})

// 现在可以直接赋值了！
const clear = () => {
  computedList.value = []  // ✅ 正常运行
}
</script>

针对你的场景：赋值为空最简代码

如果你是要清空成空字符串/空数组/空对象，直接用方案 1：

js 复制代码

// 原始数据
const formData = ref({ name: 'test' })
const computedForm = computed(() => formData.value)

// 清空函数
const reset = () => {
  formData.value = {} // ✅ 不报错，计算属性自动更新
}

总结

永远不要直接修改 computed，它是只读的
清空/赋值优先改依赖的原始 ref/reactive 数据（方案1）
必须直接赋值就用可写 computed（方案2）
报错本质：试图修改只读的计算属性