Vue.js Interview Challenge — #1 — ToDo Component — Solution

Solution

CodeSandbox

Explanation

When the value of data is an object, it’s shared across all instances of a component.

In our example we assigned our component’s data to a const declared before. By doing this every instance of the component references the same data object. Changing the message in one component changes the message of all other component instances.

We want to reuse this component, allowing users to have multiple items. To achieve that, each instance must generate a unique data object. We do that by return-ing a fresh object in data property.

data() {
  return {
    message: '',
    completed: true
  }
}

Want to try another challenge? Take me to the list of available challenges.