Complex Computed Properties

Welcome back! You have already made great progress in building a Todo Application with Vue’s Composition API. In the last lesson, you learned how to add validation and error handling to your forms, making your app more user-friendly and reliable. Now, it is time to take your skills further by exploring complex computed properties.

In this lesson, you will learn how to use computed properties to manage and transform lists of data in your application. You will see how to filter your Todo list based on user-selected criteria and how to calculate useful statistics, such as the number of active tasks. By the end of this lesson, you will be able to create dynamic, efficient, and maintainable computed properties that make your app smarter and more interactive.

Our main goal is for you to understand how to build and use complex computed properties in a real-world Vue application. You will see how these properties help you keep your UI in sync with your data without writing repetitive or error-prone code. Let’s get started!

Before we dive into more advanced uses, let’s quickly review what computed properties are and how you have used them so far. In previous lessons, you learned that computed properties in Vue are special functions that return a value based on other reactive data. They are “reactive” themselves, which means they automatically update whenever their dependencies change.

For example, when you added validation to your Todo form, you used a computed property called isInvalid to check if the input was empty or just spaces. This property updated in real time as the user typed, and you used it to control when to show error messages. This is a simple but powerful use of computed properties — they help you keep your UI logic clean and easy to follow.

Now, you are ready to use computed properties for more complex tasks, such as filtering lists and calculating counts based on dynamic conditions.

As your applications grow, you will often need to compute values that depend on more than one piece of data or that involve more complex logic. This is where complex computed properties come in. They allow you to create dynamic, conditional logic that updates automatically as your data changes.

A common real-world example is filtering a list of items based on user input or selection. In your Todo Application, you want to let users view all tasks, only active tasks, or only completed tasks. You also want to show how many tasks are still left to complete.

To achieve this, you can use computed properties that depend on both your list of todos and the current filter setting. These properties will automatically update whenever the user adds, removes, or completes a task, or when they change the filter.

Let’s look at how this works in practice.

Now that you understand how the filter value affects the computed results, let’s take a look at how users actually change the filter in the interface. To make this possible, you can add a small set of buttons that update the current filter and visually indicate which option is active.

<button
  :class="{ active: filter === 'all' }"
  @click="setFilter('all')"
>All</button>

<button
  :class="{ active: filter === 'active' }"
  @click="setFilter('active')"
>Active</button>

<button
  :class="{ active: filter === 'completed' }"
  @click="setFilter('completed')"
>Completed</button>

Each button calls a setFilter method (you’ll define this shortly) and applies the active CSS class when its filter matches the current one. This gives users clear visual feedback about which tasks they are viewing. Thanks to your computed properties, the Todo list will update automatically every time the user clicks one of these buttons.

Here is a simplified version of your App.vue file, focusing on the parts that use complex computed properties:

<script setup>
import { ref, computed } from 'vue';

const todos = ref([
  { id: 1, text: 'Master Vue Components', completed: true },
  { id: 2, text: 'Learn Advanced Forms', completed: false },
  { id: 3, text: 'Implement Filtering', completed: false },
]);
const filter = ref('all'); // 'all', 'active', 'completed'

const filteredTodos = computed(() => {
  switch (filter.value) {
    case 'active':
      return todos.value.filter(t => !t.completed);
    case 'completed':
      return todos.value.filter(t => t.completed);
    default:
      return todos.value;
  }
});

const activeCount = computed(() => todos.value.filter(t => !t.completed).length);
</script>

Let’s break down what is happening here. The todos variable holds your list of tasks, and filter keeps track of which filter the user has selected. The filteredTodos computed property uses a switch statement to decide which tasks to show. If the filter is set to 'active', it returns only the tasks that are not completed. If the filter is 'completed', it returns only the completed tasks. If the filter is 'all', it returns the full list.

This means that whenever the user changes the filter, or whenever a task is added, removed, or marked as complete, the filteredTodos property will automatically update. You do not need to write extra code to keep the UI in sync — Vue handles it for you.

The activeCount computed property is another example. It simply counts how many tasks are not completed. This value updates in real time as the user interacts with the app.

When you use these properties in your template, the UI will always show the correct list of tasks and the correct count. For example, if you have the following tasks:

[
  { id: 1, text: 'Master Vue Components', completed: true },
  { id: 2, text: 'Learn Advanced Forms', completed: false },
  { id: 3, text: 'Implement Filtering', completed: false },
]

If the filter is set to 'active', the output of filteredTodos will be:

[
  { id: 2, text: 'Learn Advanced Forms', completed: false },
  { id: 3, text: 'Implement Filtering', completed: false },
]

And the value of activeCount will be:

2

This approach keeps your code clean and your UI responsive to changes.

When working with computed properties, especially more complex ones, it is important to be aware of a few common pitfalls. One issue you might encounter is accidentally making a computed property depend on something that does not change reactively. For example, if you use a regular variable instead of a ref or reactive object, Vue will not know when to update the computed property.

Another thing to watch out for is putting too much logic inside a computed property. While it is fine to use conditions and filters, try to keep your computed properties focused and easy to read. If you find yourself writing a lot of code inside a computed property, consider breaking it up into smaller helper functions.

For debugging, you can use console.log statements inside your computed property to see when it runs and what values it returns. This can help you spot mistakes in your logic. For example, you might add a line like this:

const filteredTodos = computed(() => {
  console.log('Computing filteredTodos for filter:', filter.value);
  // ...rest of the code
});

In terms of performance, computed properties are very efficient because Vue caches their results and only recalculates them when their dependencies change. This means you can use them freely for most UI logic without worrying about slowing down your app.

In this lesson, you learned how to build and use complex computed properties in Vue. You saw how they can help you filter lists, calculate counts, and keep your UI in sync with your data — all with minimal code. You also learned some best practices for keeping your computed properties clean and easy to debug.

These skills are essential for building interactive, real-world applications. As you move on to the practice exercises, you will get hands-on experience creating and using complex computed properties in your own Todo Application. Keep experimenting and exploring — each step brings you closer to mastering advanced forms and reactivity in Vue!