Subscribe on changes!

Trigger is lost with custom v-model implementation.

avatar
Aug 15th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqNVE2P2jAQ/SvTXAhSSLqHXihQVVUPeyiqeuil7iEEB7KNP2Q7LCuU/96xYyfha4WEiD15M/P85sWn6KuU6aGh0TwifKELVUkDmppGrggHIJyYikmhDJxA0TKBotFGsF+0hBZKJRhMMHvyuQMD9OCizpmk2zEwzbCCTl/0FfybK/rMZWN67ChmCQ45heDaAG/YhipYjhrF8CmBJ/x9hKlHL7LuSHgY3BjKZJ0b6o8GsNg/rU6nUKttFxkG+pd1vqE1lEItScSFYnk9qywdEq3WbguO3SJzwCFvo4a1SwDzJqkt4vqQCA4zJra0HoWys/SzEu/Q6DR6gMZY4MfJLLKRYlESddOasVziEAVHz5wc0L/QJJqDi9gYzszuSbQ3Rup5lumysIN80alQuwxXqWo4uoumVLPZRolXTRUWJuhEgJbwFlteuOCuTcfOEwzRdHvboJ17pBJSo3m2tKw4/Wl38Z+J0+F3XiP+b3BQyKCsMn3Cd9zYhEZuUZz5Zd6QdbBBa1LPKQ7yuP8dNfE0KBaCgN+ZaRTvOKZDbUdowLXJuBRqEftuNypa8jHcoJuEnMviQ+0Wpo99S53VBze5yvfN5O8CN9EHrxjC6dEBy4YXphL87ON3/RJgFXdnQ9VnzxynVZk3jObHEA3BTihLrqZ+Urbn0pLotexd4IfSc4shBqPy4l+Cj2q3w/tjCssVRn3Ru+N1WfGl4n2HQCR1ixtDf2Tg9kScvoYjV3qdrwf4F7+aw4/c7FNULPar/Hit43Sk3jXrc7rYK7S9QlYlitOhPiwHHPLxAl5pgi70DnSN8UZA57T/AQQpKCE=

Steps to reproduce

  1. Create a custom v-model implementation.

  2. Provide a customRef to the custom v-model implementation.

  3. Create a scenario where the setter of the customRef calls trigger but the value hasn't changed.

    (Go above/below the max/min in the example.)

What is expected?

The customRef trigger to be honored by the component even though the prop value did not change.

What is actually happening?

The customRef trigger is not honored by the component and synchronization breaks as the prop value did not change.

System Info

No response

Any additional comments?

The basic v-model usage continues to work with customRef triggers, as shown in the example.

Current workaround is to add @change="$event.target.value = value" to force synchronization.

avatar
Nov 27th 2022

I'll close this as i don't consider it a bug. The chosen pattern/custom ref implementation is simply not compatible with a component controlled with v-model.

Child Components don't re-render when props don't change - that's a fundamental principle in y Vue's renderer.

avatar
Nov 28th 2022

@LinusBorg

Understood. I will continue to wrap my state refs in composable customRef-based filters/validators within setup, instead.