vue.jsvuejs3computed-properties

Error writing a computed value, but I do not write any


I set up a flag foundInBrowser that informs me whether the entry 'aaa' is present in localStorage. Clicking on an input toggle adds/removes the entry, which in turn automatically updates the flag:

<template>
  <q-toggle 
    v-model="foundInBrowser" 
    checked-icon="check" 
    color="red"
    :label="`${foundInBrowser ? '' : 'not'} registered in browser`" 
    unchecked-icon="clear"
    @click="registerInBrowser" 
  />
</template>

<script>
    const registerInBrowser = () => {
        // toggle the existance of the localstorage entry
        if (foundInBrowser.value) {
            localStorage.removeItem('aaa')
        } else {
            localStorage.setItem('aaa', person.value?.ID as string)
        }
    }
    const foundInBrowser = computed(() => localStorage.getItem('aaa') !== null)
</script>

When clicking on the toggle, I get an error in the console:

Write operation failed: computed value is readonly

I do not understand this error: I am not trying to write to foundInBrowser anywhere.


Solution

  • It's pretty much what it says it is. You are putting a computed into a v-model:

    <q-toggle 
        v-model="foundInBrowser" 
    

    Since v-model is two-way binding, the q-toggle will write back to it, which fails with the error since you cannot write to a regular computed.


    Either turn it into a one-way binding by binding only to modelValue:

    <q-toggle 
        :modelValue="foundInBrowser" 
    

    or turn your computed into a writable computed:

    const foundInBrowser = computed({
      get(){
        return localStorage.getItem('aaa') !== null
      },
      set(newValue){
         // probably set or delete 'aaa' according to newValue?
      }
    })