Vue.js Tip #1 With great power comes great Reactivity

"With great power comes great responsibility". That's what uncle Ben would say about Vue reactivity system.

Two-way data bind is when you have a variable binded to a input. When the variable changes, the input updates, when you type in the input, the variable updates with the new value.

Vue.js don't have two way data binding for , instead the data gets in through the value property and get's out as a input event, like this:

<input :value="fullName" @input="fullName = $event.target.value">

But this repetitive code can be replaced with the native directive v-model

<input v-model="fullName">

Much simpler, isn't? But remember that underneath Vue compiles to the same code before.

The example below, does not update the name property, because it must exist upfront so Vue can make it reactive.

To fix it, simply add the property with a empty/default value.

Tip #1: Always declare your data before use it

Javascript can’t detect new properties, because it has no feature like PHP magic methods __get/__set or Ruby's method_missing, it just have getters and setters that must exists before accessing it.

The same goes for data comming from outside, like a ajax request. Make sure the json has all data, even with null or empty string on it.

Learn more at https://vuejs.org/v2/guide/reactivity.html