解決Vue警告Write?operation?failed:computed?value?is?readonly
警告信息：
瀏覽器控制臺(tái)警告：Write operation failed: computed value is readonly
使用環(huán)境：
Vue 3.2.41
Chrome x64 v103.0.5060.66
報(bào)錯(cuò)情景：
利用Vue的響應(yīng)式修改某個(gè)值時(shí)出現(xiàn)該警告。
<template>
{{ msg }}
<br>
<button @click="add">+</button>
</template>
<script setup lang="ts">
import { computed, ref} from 'vue'
const x = ref('-')
// 計(jì)算屬性
const msg:any = computed(()=>{
return x.value + '-'
})
// 修改 計(jì)算屬性的值 的方法
const add = () => {
msg.value = msg.value + '???'
}
</script>
報(bào)錯(cuò)原因：
修改的值是計(jì)算屬性，而計(jì)算屬性是只讀的。所以無(wú)法修改。
解決方法：
為計(jì)算屬性配置修改方法，如下：
<script setup lang="ts">
import { computed, ref} from 'vue'
const msg = ref('-')
// 計(jì)算屬性
const computedMsg: any = computed({
get() {
// 這里返回的值是獲取計(jì)算屬性的值
return msg.value + '-'
},
set(newValue) {
// 參數(shù)newValue是被修改后的值
// 這里是修改的具體邏輯
/*
注意這里不要使用下面的方法修改計(jì)算屬性的值來(lái)達(dá)到修改目的
而應(yīng)該直接修改源響應(yīng)數(shù)據(jù)xxx的值
*/
msg.value = newValue
// computedMsg.value = newValue
}
})
// 修改 計(jì)算屬性的值 的方法
const add = () => {
computedMsg.value = computedMsg.value + '???'
}
</script>
參考：
總結(jié)
到此這篇關(guān)于解決Vue警告Write operation failed:computed value is readonly的文章就介紹到這了,更多相關(guān)Vue警告Write operation failed內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問題
今天小編就為大家分享一篇解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09![vue模塊導(dǎo)入報(bào)錯(cuò)問題Module not found: Error:[CaseSensitivePathsPlugin]](http://img.jbzj.com/images/xgimg/bcimg1.png)
vue模塊導(dǎo)入報(bào)錯(cuò)問題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導(dǎo)入報(bào)錯(cuò)問題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-05-05
vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法
下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03
vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了vue選項(xiàng)卡Tabs組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue中@change、@input和@blur的區(qū)別及@keyup介紹
這篇文章主要給大家介紹了關(guān)于Vue中@change、@input和@blur的區(qū)別及@keyup介紹的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的問題,主要問題就是因?yàn)閒ilterable屬性,根本解決方案是選中的時(shí)候讓他失去焦點(diǎn)?el-select有一個(gè)visible-change事件,下拉框出現(xiàn)/隱藏時(shí)觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04