search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.76k stars 33.67k forks source link

Update value from Renderless component through v-model. #8814

Closed maxim-usikov closed 6 years ago

maxim-usikov commented 6 years ago

Version

2.5.17

Reproduction link

https://codesandbox.io/s/4xqy2zqlw4?module=%2Fsrc%2FApp.vue

Steps to reproduce

  1. Declare (A) Renderless and (B) Stateless / custom components.
  2. Put value through scoped-slot from (A) to (B).

For more: see reproduction link.

What is expected?

v-model should update value in scoped slot. (A) - component.

What is actually happening?

Does not updated through plain html or custom component.

Same problem with computed props in (A) component, then use getters and setters.

This might be a problem. Because custom components don't always use input as an event. Sometimes it's update, sometimes it's select, etc...

Or I just should use HOC for that approach?

posva commented 6 years ago

You cannot modify the value coming from a slot-scope in the parent. You could if it was the property of an object but you shouldn't either. It's a read only property

Remember that when using v-model="foo", somewhere in the js generated, there will be a statement similar to foo = newValue, which wouldn't work with a scoped-slot because you are creating some kind of local variables. Exactly like in a v-for