fix: [Vue warn]: Write operation failed: computed value is readonly.

See original GitHub issue

🐛 The bug At the moment, if a component that calls useFetch has a computed property returned from setup, it will give the following error:

[Vue warn]: Computed property was assigned to but it has no setter.

It still works correctly, but this is unattractive, and ideally we wouldn’t be attempting to assign a value to a computed property at all.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:14
  • Comments:18 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
danielroecommented, Aug 3, 2021

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

const a = computed({
  get() {
    // your getter
  },
  set(val) {
    // your setter
  }
})
3reactions
sethiddencommented, Jun 23, 2022

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

"Write operation failed: computed property "posts" is ...
"Write operation failed: computed property "posts" is readonly" ... I try remove post from PostList, but getting an error
Read more >
computed property "cartTotal" is readonly. : r/webdev
It sounds like you're trying to modify cartTotal. Since that's a getter which is a computed value, it's readonly and can't be modified....
Read more >
Unable to update computed variable second time. (Vue3 ...
Getting a warning error like “Write operation failed: computed value is readonly”. My requirement is , I want to store initial fetched data...
Read more >
vue3之fix: [Vue warn]: Write operation failed: computed ...
vue3之fix: [Vue warn]: Write operation failed: computed value is readonly. c_reshape 于 2021-12-07 17:54:54 发布 4053 收藏 1. 分类专栏: vue 文章标签: ...
Read more >
Vue: When a computed property can be the wrong tool
A computed property's result is cached. In our example above, that means that as long as the todos array doesn't change, calling openTodos.value...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found