Vue3报错computed value is readonly的解决方案
作者：还是大剑师兰特
这篇文章主要为大家详细介绍了Vue3报错computed value is readonly的原因排查和解决方法,文中的示例代码讲解详细,有需要的小伙伴可以了解下
这个报错的核心原因：computed 计算属性是只读的，你直接尝试给它赋值（比如 xxx = ''）就会触发这个错误。
结合你的场景：触发函数后要把值清空，我给你最直接、最简单的 2 种解决方案（Vue3 + 组合式API）。
先看错误示例（你现在的代码）
<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 的值来自原始响应式数据，你清空原始值即可，计算属性会自动更新。
<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。
<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：
// 原始数据
const formData = ref({ name: 'test' })
const computedForm = computed(() => formData.value)
// 清空函数
const reset = () => {
formData.value = {} // ✅ 不报错，计算属性自动更新
}
总结
- 永远不要直接修改
computed，它是只读的 - 清空/赋值优先改依赖的原始 ref/reactive 数据（方案1）
- 必须直接赋值就用可写 computed（方案2）
- 报错本质：试图修改只读的计算属性
到此这篇关于Vue3报错computed value is readonly的解决方案的文章就介绍到这了,更多相关Vue3报错解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！