解決Vue警告Write?operation?failed:computed?value?is?readonly

更新時間：2023年03月24日 09:37:40 作者：PKQ1023

這篇文章主要給大家介紹了關于如何解決Vue警告Write?operation?failed:computed?value?is?readonly的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

警告信息：

瀏覽器控制臺警告：Write operation failed: computed value is readonly

使用環(huán)境：

Chrome x64 v103.0.5060.66

報錯情景：

利用Vue的響應式修改某個值時出現(xiàn)該警告。

<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) {
        // 參數(shù)newValue是被修改后的值
      
        // 這里是修改的具體邏輯
      	/*
		   注意這里不要使用下面的方法修改計算屬性的值來達到修改目的
           而應該直接修改源響應數(shù)據(jù)xxx的值
		*/
        msg.value = newValue        
        // computedMsg.value = newValue
    }
})

// 修改 計算屬性的值 的方法
const add = () => {
    computedMsg.value = computedMsg.value + '???'
}
</script>

參考：

計算屬性 | Vue.js

總結(jié)

到此這篇關于解決Vue警告Write operation failed:computed value is readonly的文章就介紹到這了,更多相關Vue警告Write operation failed內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

基于vue 開發(fā)中出現(xiàn)警告問題去除方法

解決vue 項目引入字體圖標報錯、不顯示等問題
今天小編就為大家分享一篇解決vue 項目引入字體圖標報錯、不顯示等問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue模塊導入報錯問題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導入報錯問題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
關于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
vue.js移動數(shù)組位置,同時更新視圖的方法
下面小編就為大家分享一篇vue.js移動數(shù)組位置,同時更新視圖的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue-cli3在main.js中console.log()會報錯的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue選項卡Tabs組件實現(xiàn)示例詳解
這篇文章主要為大家介紹了vue選項卡Tabs組件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
Vue中@change、@input和@blur的區(qū)別及@keyup介紹
這篇文章主要給大家介紹了關于Vue中@change、@input和@blur的區(qū)別及@keyup介紹的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-02-02
elementPlus?的el-select在提示框關閉時自動彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關閉時自動彈出閉時自動彈出的問題,主要問題就是因為filterable屬性,根本解決方案是選中的時候讓他失去焦點?el-select有一個visible-change事件,下拉框出現(xiàn)/隱藏時觸發(fā),感興趣的朋友跟隨小編一起看看吧
2024-01-01
vue3.2中的vuex使用詳解
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-04-04