4 ms·

v-model in Vue is not exactly two-way binding. It is just syntax sugar for passing the value as a prop and setting an event handler for the “input” event. It l

• fbonetti 9y ago
  How is that not two-way binding? The Vue documentation even calls it two-way binding: “You can use the v-model directive to create two-way data bindings on form input and textarea elements.” https://vuejs.org/v2/guide/forms.html https://vuejs.org/v2/guide/forms.html
  • ohceecho 9y ago
    Yeah, the documentation should probably reflect that. It works like shallow two-way binding, but it implemented differently. Instead of using observers on the data itself, it uses an event, thus maintaining a cleaner interface between the components and avoiding the performance problems and bugs that come with two-way binding. `v-model` is just a syntax sugar to save you from typing `v-bind:value="val" v-on:input="val = $event.target.value"` over and over. Nothing more than that.
    • dabernathy89 9y ago
      V-model is great. For other folks reading this thread, a few things it lets you do: 1) You can still use v-model with Vuex: https://vuex.vuejs.org/en/forms.html https://vuex.vuejs.org/en/forms.html 2) You can easily distribute custom components that provide `v-model` to users 3) You can dynamically accept 3rd party components that implement `v-model`. E.g., I have a component that incorporates standard form fields, but can also be used with any custom components that properly implement `v-model`.[1] [1] - Vue Query Builder (https://dabernathy89.github.io/vue-query-builder/ https://dabernathy89.github.io/vue-query-builder/) - try adding a 'Range' rule to see this in action
      • deleted 9y ago
        [deleted]