vuejs / docs

📄 Documentation for Vue 3
https://vuejs.org
Other
2.92k stars 4.4k forks source link

Clarification on Multiple v-model Bindings in the Documentation #3058

Closed netosts closed 2 days ago

netosts commented 5 days ago

Feature Request

Currently, the documentation lacks detailed information on how to handle v-model updates, especially when dealing with multiple bindings. Understanding this is crucial for working with Vue's two-way data binding system, particularly using the @update:model-value event.

Most importantly, there is no mention of handling multiple v-model bindings updates—neither in the official documentation nor through external resources. To handle this in practice, one can use the following syntax:

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
  @update:first-name.model-value="foo"
  @update:last-name.model-value="foo2"
/>

This approach enables handling updates for multiple bound values (e.g., first-name and last-name), but the process isn't well-documented, which can cause confusion for developers.

I propose adding a section in the documentation that clearly explains this pattern, with examples and guidelines on how to handle updates for multiple v-model bindings. This would greatly enhance the developer experience and provide clarity for a commonly needed feature.

AloisSeckar commented 5 days ago

Thanks for the suggestion. However:

  1. The construct you are talking about belongs to https://vuejs.org/guide/components/v-model.html#multiple-v-model-bindings where I beleive it already is, with greater level of detail too.
  2. The purpose of v-model is to abstract developer from having to use @update event. You just declare v-model binding and it works out-of-the-box updating the values from within the child component to the parent. If you need to react to the change in parent with side effects, I'd rather bet on a watcher, because then it has clearer relation to the variable change, not to some component event.