使用Q-Toggle绑定计算属性报错：computed value is readonly

我设置了一个计算属性foundInBrowser，用来判断localStorage中是否存在'aaa'条目。点击Quasar的q-toggle组件可增删该条目，进而自动更新此标记：

<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 = () => {
        // 切换localStorage条目的存在状态
        if (foundInBrowser.value) {
            localStorage.removeItem('aaa')
        } else {
            localStorage.setItem('aaa', person.value?.ID as string)
        }
    }
    const foundInBrowser = computed(() => localStorage.getItem('aaa') !== null)
</script>

点击切换按钮时，控制台报错：

Write operation failed: computed value is readonly

我并没有尝试对foundInBrowser进行写入操作，请问原因是什么？

问题原因 #

问题出在v-model="foundInBrowser"上。

v-model是Vue的语法糖，它同时包含读取值和写入值两个行为：当组件状态变化时，v-model会自动尝试给绑定的变量赋值。而你定义的foundInBrowser是只读计算属性（默认computed返回的是只读ref对象），当q-toggle切换时，v-model试图修改这个只读属性，就触发了报错。

解决方法 #

方法一：将计算属性改为可写的

给计算属性添加set方法，让它支持写入操作，同时可以去掉单独的@click事件：

const foundInBrowser = computed({
  get() {
    return localStorage.getItem('aaa') !== null
  },
  set(newValue) {
    if (newValue) {
      localStorage.setItem('aaa', person.value?.ID as string)
    } else {
      localStorage.removeItem('aaa')
    }
  }
})

方法二：拆分v-model为单向绑定+事件

不用v-model，改用:model-value绑定值，保留@click处理逻辑：

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

这样组件只会读取计算属性的值，不会尝试修改它；点击事件修改localStorage后，计算属性会自动重新计算并更新视图。

内容的提问来源于stack exchange，提问作者WoJ