Today, I will be talking about computed property in Vue.js. First, I will code this tutorial from vuejs.org. Afterwards, I will touch the differences between methods and computed properties in Vue.js (not in detail).

This is part 3 of my Vue.js Basics series, to read part 2, please go to here

Here's the whole code:

<script>
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
  computed: {
    hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    },
    toggleHideCompleted() {
      this.hideCompleted = !this.hideCompleted
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in hideCompletedTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="toggleHideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>

Time to read to read code above in small chunks!

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },

In our data(){} property we've got newTodo for text key property in our todos array. hideCompleted key for hiding completed todos, this is a boolean value (true or false). Its task is to hide completed todos if it's true, and show all todos regardless of they're completed or not whhen it's false. Finally, we've got an array of objects that stores our todos. As you notice, we've got a new key (done:) in our objects. That's to alter styling for tasks those are done, later on that one.

Next, computed property:

computed: {
    hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }
  },

hideCompletedTodos() function returns something based on hideCompleted's boolean value (true or false). If hideCompleted is true, it filters items those item.done properties are false. In other words, we will have only item.done with falsy values left because item => !item.done this code returns items those item.done values are falsy. : this.todos this code says, else (if hideCompleted is not true), then return todos array altogether.

A bit more about computed. At first glance, computed may look like as if it's the same with methods, but it's not. First of all, computed re-renders only the changed element, on the other hand, methods re-render everything. This becomes a performance issue. To solve this use computed, a computed property tracks reactive state as dependencies, and caches the result. Once when the dependencies change, it updates. However, methods property updates even if the result doesn't change.

Time to get back to our code

methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    }
  }
}

addTodo() function adds (actually 'pushes') a new object to the todos array. Finally, it sets this.newTodo to an empty string, so we won't see [object Object] weird thing in the input once the form (we will talk about it soon) is submitted.

removeTodo(todo) function takes a parameter - todo. When 'X' button is clicked, it will bring that particular 'todo' ({ id: id++, text: 'Learn HTML', done: true }... one of these) and filter (remove) it. Since, I've given item parameter in filter method, each to do will be represented as item. Logic behind this code; this.todos.filter(item => item.id !== todo.id), this compares if item.id and todo.id are not the same. Then, it returns items those have different ids.

What the heck does this mean? So, when we click on 'X' button, it returns an object with an id key. As you know filter method iterates over arrays. So, it iterates over todos array, and returns items those ids don't match todo.id that comes from the item parameter. part of this code is done, not let's talk about the template part.

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in hideCompletedTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

@submit.prevent prevents forms from refreshing pages when form is submitted. Then, we've got an input tag that is two-way-binded to newTodo data. v-model: is responsible for syncing newTodo data and addTodo() function. Outside of our form we have got a list tag.

Here's how v-for works in a list tag:
As you see there's todo in hideCompletedTodos. Yes, we've got todos array, but what is todo? It's a local variable that will be alive only in this

hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }

<style>
.done {
  text-decoration: line-through;
}
</style>

<li v-for="todo in hideCompletedTodos" :key="todo.id">
<button @click="removeTodo(todo)">X</button>
</li>

<button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>