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

本篇內容介紹了“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如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！