vue.js 写入计算值时出错,但我没有写入任何计算值

5ssjco0h  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(107)

我设置了一个标志foundInBrowser,它通知我条目'aaa'是否存在于localStorage中。单击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

cbjzeqam

cbjzeqam1#

基本上就是它说的那样。你将一个computed放入v-model

<q-toggle 
    v-model="foundInBrowser"

字符串
由于v-model是双向绑定,所以q-toggle将写回它,这会失败,并返回错误,因为您无法写入常规计算。
要么通过只绑定到modelValue将其转换为单向绑定:

<q-toggle 
    :modelValue="foundInBrowser"


或者将你的computed转换为可写的computed:

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

相关问题