fix: [Vue warn]: Write operation failed: computed value is readonly. about composition-api HOT 23 CLOSED

@chovyprognos In the composition API you would do that like so:

const a = computed({
  get() {
    // your getter
  },
  set(val) {
    // your setter
  }
})

from composition-api.

I'm getting this same warning but it's not even a computed variable.

const page: any = reactive({
  content: null,
})

later :

const { fetch } = useFetch(async () => {
  const pageData = await (fetch stuff...)
  if (pageData) {
     page.content = pageData
  }
})

Setting page.content's value throws the warning about write operation.
Is there any way to avoid this weird warning?

from composition-api.

@davaipoka Hm, you're right. I had a computed that depended on two values (say countries and user addresses). The client-side render worked but the server-side didn't work (computed value was not pre-populated). When I added the dependencies the computed relies on - countries and user addresses refs to the setup function's return object, the server-side render started working.

Normally I wouldn't include those 2 refs in the return object - they're not used in the template. But if it makes it work it makes it work.

from composition-api.

just because this is the top search result for this error. i ran into this issue when i accidentally had a ref attribute in my template that was named the same as a computed property. renaming/removing the ref fixed things up for me.

from composition-api.

see vuejs/composition-api#445

from composition-api.

I'll make sure to make an issue with a reproduction!

from composition-api.

In Vue3 the computed ref has an property effect normal ref don't have this property. Maybe we get / have something like this in @vue/composition-api

from composition-api.

Nope with @vue/composition-api computed and ref look the same...

from composition-api.

https://github.com/nuxt-community/composition-api/blob/main/src/fetch.ts#L263 Can we just add check if isReadonly(vm[key]) ?

from composition-api.

Definitely worth a test.

from composition-api.

Update: after a quick test, we still can't detect readonly properties, once applied to the Vue instance.

from composition-api.

Is there a good workaround?

from composition-api.

@TheNoim The warning is annoying but it doesn't actually cause an issue.

from composition-api.

how do i create a setter?

from composition-api.

When using a vuex component that is computed and gets called in useFetch, there is an vuex Error:

do not mutate vuex store state outside mutation handlers.

Sad, that this can´t be ignored

from composition-api.

When using a vuex component that is computed and gets called in useFetch, there is an vuex Error:

do not mutate vuex store state outside mutation handlers.

Sad, that this can´t be ignored

He's right. I'm having the same issue. Is there any workaround?

from composition-api.

you should return in your return object await variable firstly and then return on nextline (in your return object) your computed property based on await variable. dont know why but its work

from composition-api.

Hi, I'm facing the same issue with:

"nuxt": "^2.15.8",
"@nuxtjs/composition-api": "^0.33.1",

If there is any update on how to fix that?

from composition-api.

Hi same here.
Any updates?

from composition-api.

Samsies

 "nuxt": "^2.15.8",
 "@nuxtjs/composition-api": "^0.31.0",

from composition-api.

@danielroe any news on this?

from composition-api.

Please do open a new issue with a reproduction and I'll be very happy to look into it. 🙏

from composition-api.

just because this is the top search result for this error. i ran into this issue when i accidentally had a ref attribute in my template that was named the same as a computed property. renaming/removing the ref fixed things up for me.

This was the case for me. Thanks.

from composition-api.