我设置了一个标志foundInBrowser,它通知我条目'aaa'是否存在于本地存储中.点击input 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 = () => {
        // 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>

当点击切换时,我在控制台中得到一个错误:

Write operation failed: computed value is readonly

我不理解这个错误:我没有试图在任何地方写到foundInBrowser.

推荐答案

这和它所说的差不多.您正在将一台计算机放入一个v-model:

<q-toggle 
    v-model="foundInBrowser" 

由于v-model是双向绑定,Q切换将写回它,这将失败,并显示错误,因为您不能写入常规的计算.


通过仅绑定到modelValue将其转换为单向绑定:

<q-toggle 
    :modelValue="foundInBrowser" 

或者把你的电脑变成writable computed分:

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

Vue.js相关问答推荐

Vue路由路径匹配行为

如何将$validator实例注入到使用组合API语法的Vue2.7应用程序中

在 Vuejs 中更新 Chartjs 图表数据集

Vue 3 范围滑块中的多个值

绑定事件在渲染函数中不起作用

有什么理由不在 vue3 中使用