解决Vue警告Write operation failed:computed value is readonly
警告信息:
浏览器控制台警告:Write operation failed: computed value is readonly
使用环境:
Vue 3.2.41
Chrome x64 v103.0.5060.66
报错情景:
利用Vue的响应式修改某个值时出现该警告。
<template> {{ msg }} <br> <button @click="add">+</button> </template>
<script setup lang="ts"> import { computed, ref} from 'vue' const x = ref('-') // 计算属性 const msg:any = computed(()=>{ return x.value + '-' }) // 修改 计算属性的值 的方法 const add = () => { msg.value = msg.value + '???' } </script>
报错原因:
修改的值是计算属性,而计算属性是只读的。所以无法修改。
解决方法:
为计算属性配置修改方法,如下:
<script setup lang="ts"> import { computed, ref} from 'vue' const msg = ref('-') // 计算属性 const computedMsg: any = computed({ get() { // 这里返回的值是获取计算属性的值 return msg.value + '-' }, set(newValue) { // 参数newValue是被修改后的值 // 这里是修改的具体逻辑 /* 注意这里不要使用下面的方法修改计算属性的值来达到修改目的 而应该直接修改源响应数据xxx的值 */ msg.value = newValue // computedMsg.value = newValue } }) // 修改 计算属性的值 的方法 const add = () => { computedMsg.value = computedMsg.value + '???' } </script>
参考:
总结
到此这篇关于解决Vue警告Write operation failed:computed value is readonly的文章就介绍到这了,更多相关Vue警告Write operation failed内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue模块导入报错问题Module not found: Error:[CaseSensi
这篇文章主要介绍了vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin],具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06关于element-ui的隐藏组件el-scrollbar的使用
这篇文章主要介绍了关于element-ui的隐藏组件el-scrollbar的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-05-05vue-cli3在main.js中console.log()会报错的解决
这篇文章主要介绍了vue-cli3在main.js中console.log()会报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04Vue中@change、@input和@blur的区别及@keyup介绍
这篇文章主要给大家介绍了关于Vue中@change、@input和@blur的区别及@keyup介绍的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02elementPlus 的el-select在提示框关闭时自动弹出的问题解决
这篇文章主要介绍了elementPlus 的el-select在提示框关闭时自动弹出闭时自动弹出的问题,主要问题就是因为filterable属性,根本解决方案是选中的时候让他失去焦点 el-select有一个visible-change事件,下拉框出现/隐藏时触发,感兴趣的朋友跟随小编一起看看吧2024-01-01
最新评论