vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.55k stars 8.31k forks source link

toRef strange behaviour with props and v-model #5246

Closed Leogio360 closed 2 years ago

Leogio360 commented 2 years ago

Version

3.2.26

Reproduction link

codesandbox.io

Steps to reproduce

Pass a value obtained by a toRef(props, 'someProps') to a component's v-model . The value will not change (even if the sub compents emits an update:modelValue even) because it's treated as readonly

What is expected?

The list value must change

What is actually happening?

The list is unchanged. In the console a WARNING is thrown: Set operation on key "list" failed: target is readonly.

LinusBorg commented 2 years ago

This works as intended. Use a computed with a getter and setter to wrap a prop for v-model.

Wrote about it here: https://www.vuemastery.com/blog/vue-3-data-down-events-up/

VueUse also provides a composable to do this.