Vue Data Object : Details You Must Know

We at FeldsparTech are using Vue to build our no code/low code platform ATMAN. And just like any other Vue application, data object is one of the most used options in our application too. Even though using a data object is very simple, there are a few minute but important details about it that one should understand.

1) What is the data object?

Vue provides an option called data, which is a function that Vue calls every time it creates a new instance of the component.This function has to return an object which Vue will wrap up in its reactivity system. That means if you are using a data object in your html, then, any change to that object will cause the html to render.

2) How do you create one?

JSFiddle

new Vue({
  el: "#example",
  data() {
    return {
      hello: "Hello World!!"
    }
  }
})

and use it in your html as

<div id="example">
  <h2>
    {{ hello }}
  </h2>
</div>

3) When is a property not reactive?

Vue allows you to create a property outside of the data option. So, if you want you can create a property like this:
JSFiddle

new Vue({
  el: "#example",
  -
  -
  -
  mounted() {
    this.defaultName = ""
  }
})

But!!

One problem with this way of creating a property is that Vue will not be able to add it to its reactivity system. And therefore if you use this property in your html like this

<div id="example">
  <h2>
    {{ defaultName }}
  </h2>
</div>

and later make a change to this property,

<div id="example">
  -
  -
  -
  <button @click="changeName">Change Name</button>
</div>

new Vue({
  el: "#example",
  -
  -
  -
  mounted() {
    this.defaultName = ""
  },
  methods: {
      changeName() {
          this.defaultName = "Enoch"
      }
  }
})

Vue will not be able to catch the change and the template will not update.

But there can be situations when you might need to make this kind of change and want the html to be reactive. So, for that Vue provides various ways to make the changes reactive, about which you can read more in detail here.

4) Common mistake

One common mistake that one should be aware of is that initialising a data property with another property does not make it reactive.

Let's say you are making a todo application and you have created it like this
JSFiddle

<div id="example">
  <div v-for="(todo, i) in todos" :key="i">
    {{todo}}
  </div>
</div>


new Vue({
  el: "#example",
  data() {
    return {
      todos: ["todo1", "todo2", "todo3"]
    }
  }
})

Now let's say you want to have a default todo item always added to the top of the list and its value changes depending on which day it is.
So you add it as:

new Vue({
  el: "#example",
  data() {
      return {
          defaultItem: "MondayTask",
          todos: [this.defaultItem, "todo1","todo2","todo3"]
      }
  }
})

Now even if you change defaultItem property, the todos list will remain the same. As both the properties are initialised at the same time Vue doesn't know that it has to react to any change in defaultItem and update todos.

Learnings:

• Create all your properties in the data option for them to be reactive.
• Initialising a data property by another property does not make it reactive.

References:

https://vuejs.org/v2/guide/instance.html#Data-and-Methods
https://vuejs.org/v2/guide/reactivity.html