Subscribe on changes!

issue with toRef

avatar
Feb 16th 2022

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

prop not being updated after children emit, see link to playground

What is expected?

component emit update:modelValue to parent

What is actually happening?

nothing

avatar
Feb 16th 2022

props are read only, toRef on a prop is still read only.

avatar
Feb 16th 2022

props are read only, toRef on a prop is still read only.

so should i emit update:modelValue watching a regular ref?

avatar
Feb 16th 2022

with a writable computed as the model, emit the value on set https://vuejs.org/guide/essentials/computed.html#writable-computed

or more low level

<input :value=props.modelValue  @input="(e)=> emit('update:modelValue', e.target.value)">
avatar
Feb 16th 2022

@lidlanca thanks! both suggestions works!

low level

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSc7XG4gIFxuaW1wb3J0IENvbXAgZnJvbSBcIi4vQ29tcC52dWVcIjtcblxuY29uc3QgbXNnID0gcmVmKCdIZWxsbyBXb3JsZCEnKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgxPnt7IG1zZyB9fTwvaDE+XG4gIDxDb21wIHYtbW9kZWw9XCJtc2dcIj48L0NvbXA+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0iLCJDb21wLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgeyB0b1JlZiwgZGVmaW5lUHJvcHMsIGRlZmluZUVtaXRzIH0gZnJvbSAndnVlJ1xuICBcbmNvbnN0IHByb3BzID0gZGVmaW5lUHJvcHMoW1wibW9kZWxWYWx1ZVwiXSlcblxuY29uc3QgZW1pdCA9IGRlZmluZUVtaXRzKFtcInVwZGF0ZTptb2RlbFZhbHVlXCJdKVxuXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8aW5wdXQgOnZhbHVlPVwicHJvcHMubW9kZWxWYWx1ZVwiIEBpbnB1dD1cImUgPT4gZW1pdCgndXBkYXRlOm1vZGVsVmFsdWUnLGUudGFyZ2V0LnZhbHVlKVwiPlxuPC90ZW1wbGF0ZT4ifQ==

computed

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSc7XG4gIFxuaW1wb3J0IENvbXAgZnJvbSBcIi4vQ29tcC52dWVcIjtcblxuY29uc3QgbXNnID0gcmVmKCdIZWxsbyBXb3JsZCEnKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgxPnt7IG1zZyB9fTwvaDE+XG4gIDxDb21wIHYtbW9kZWw9XCJtc2dcIj48L0NvbXA+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0iLCJDb21wLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgeyB0b1JlZiwgZGVmaW5lUHJvcHMsIGRlZmluZUVtaXRzLCBjb21wdXRlZCB9IGZyb20gJ3Z1ZSdcbiAgXG5jb25zdCBwcm9wcyA9IGRlZmluZVByb3BzKFtcIm1vZGVsVmFsdWVcIl0pXG5cbmNvbnN0IGVtaXQgPSBkZWZpbmVFbWl0cyhbXCJ1cGRhdGU6bW9kZWxWYWx1ZVwiXSlcblxuY29uc3QgbXNnID0gY29tcHV0ZWQoe1xuICBnZXQoKXtcbiAgICByZXR1cm4gcHJvcHMubW9kZWxWYWx1ZVxuICB9LFxuICBzZXQodmFsKXtcbiAgICBlbWl0KFwidXBkYXRlOm1vZGVsVmFsdWVcIix2YWwpXG4gIH1cbn0pXG5cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxpbnB1dCB2LW1vZGVsPVwibXNnXCI+XG48L3RlbXBsYXRlPiJ9