4 ms·
v-model is a two-way binding. In other words, you don’t have to write a setter function for every piece of state - you can hook up a state field directly to a t
by fbonetti 9y ago
v-model is a two-way binding. In other words, you don’t have to write a setter function for every piece of state - you can hook up a state field directly to a text input, for example.
React doesn’t allow two-way binding, or at least heavily discourages it. The downside of two-way bindings is that they can make it hard to track and understand state changes. The upside is that they drastically cut down on boilerplate for things like forms.
- FlorianRappl 9y agoPersonally, I think one of the best things of React is that it left out two-way binding on purpose. I agree, that sometimes people write a lot of boilerplate therefore, but at least it can be understood (and modified) easily. Advanced people write nice re-usable functions with the same effect, but less boilerplate.
- ohceecho 9y agov-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 looks like two-way binding but has none of the gotchas. I agree with you point btw.
- fbonetti 9y agoHow 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 agoYeah, 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 agoV-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]
- lima 9y agoTwo way binding is fine inside a component.
- s4vi0r 9y agoDoesn't redux handle that?
- mercer 9y agoVue 'takes care' of a lot of stuff that you have to do manually in Redux, for both better and worse.
- Too 9y agoComputed properties in vue avoids some of the $watch-spaghetti and excessive state you can get when misusing two way binding. See https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched... and Computed setters
- manigandham 9y agoIt’s not 2-way binding, it’s just a shortcut where Vue will generate the 1-way state functions for you to make development faster.
- jbergens 9y agoHave you tried mobx with react? For me it looks like a good solution without much boilerplate. Also, for simple forms you can just store state as component state and then passit along at submit.