解決Vue警告Write?operation?failed:computed?value?is?readonly
更新時(shí)間：2023年03月24日 09:37:40 作者：PKQ1023
這篇文章主要給大家介紹了關(guān)于如何解決Vue警告Write?operation?failed:computed?value?is?readonly的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
警告信息：
瀏覽器控制臺(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ì)算屬性是只讀的。所以無法修改。
解決方法：
為計(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ì)算屬性的值來達(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)文章
vue3.0中的雙向數(shù)據(jù)綁定方法及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue3.0中的雙向數(shù)據(jù)綁定方法 ，文中通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要給大家介紹了關(guān)于vue過濾器filter的使用方法,Vue.js的過濾器(Filter)是一種可重用的功能,用于對(duì)文本進(jìn)行格式化,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程
這篇文章主要介紹了vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式超詳細(xì)教程，其中聲明式router-link實(shí)現(xiàn)跳轉(zhuǎn)最簡單的方法，可用組件router-link來替代a標(biāo)簽，每種方式給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
Vue設(shè)置別名聯(lián)想路徑即@/生效的方法
這篇文章主要給大家介紹了Vue設(shè)置別名聯(lián)想路徑即@/生效的方法,文中有詳細(xì)的代碼示例和圖文講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-11-11
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄
這篇文章主要介紹了vue.js 初體驗(yàn)之Chrome 插件開發(fā)實(shí)錄 ,需要的朋友可以參考下2017-05-05
簡單了解Vue + ElementUI后臺(tái)管理模板
這篇文章主要介紹了簡單了解Vue + ElementUI后臺(tái)管理模板,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
快速解決electron-builder打包時(shí)下載依賴慢的問題
使用 Electron-builder 打包,有時(shí)會(huì)在下載Electron、nsis、winCodeSign的過程中 Timeout 導(dǎo)致打包失敗,本文給大家分享快速解決electron-builder打包時(shí)下載依賴慢的問題,感興趣的朋友一起看看吧2024-02-02
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
vue directive全局自定義指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制的操作方法
這篇文章主要介紹了vue directive全局自定義指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制,本文結(jié)合實(shí)例代碼對(duì)基本概念做了詳細(xì)講解，需要的朋友可以參考下2023-02-02