5 ms·

Coming from Angular, I hated seeing another framework that has conditions inside elements, like v-if, v-bind, etc. Especially when I saw things like @click, @s

• spraak 9y ago
  > Also, when coming from React, being able to use certain things like v-model makes you not want to go back to React Could you explain that further? I definitely see Vue as an improvement over Angular, but React still is much better for me than Vue, so I'm curious what you mean.
  • 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 ago
      Personally, 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 ago
        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 looks like two-way binding but has none of the gotchas. I agree with you point btw.
        • 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
    • s4vi0r 9y ago
      Doesn't redux handle that?
      • mercer 9y ago
        Vue 'takes care' of a lot of stuff that you have to do manually in Redux, for both better and worse.
    • Too 9y ago
      Computed 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 ago
      It’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 ago
      Have 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.