Computed Properties in VueJs

Debugging of Computed Properties

The computed properties can accept a second argument using onTrack and onTrigger options, and these arguments only work in the development mode. Let's learn more about these in detail with an example,

• onTrack: When we use the onTrack argument, this argument is called when a reactive property or reference is tracked as a dependency.
• onTrigger: When using the onTrigger argument, it is called when the watcher callback is triggered due to the mutation of the dependency.

const plusTwo = computed(() => count.value + 2, {  onTrack(e) {    // triggered when count.value is tracked as a dependency.    debugger  },  onTrigger(e) {    // triggered when count.value is mutated.    debugger  } }) // access plusTwo, should trigger onTrack. console.log(plusTwo.value) // mutate count.value, should trigger onTrigger. count.value++ You can also try this code with Online Javascript Compiler Run Code

How are computed properties used in VueJs?

We can use computed properties to solve complex problems like filtering the data, performing calculations, using boolean conditionals, and mapGetters. Let's see how we can efficiently use computed properties with examples for each discussed problem.

Filtering Data

We can use computed properties for filtering the data. You want to filter an array from an input search bar. 

Considering the data function given below, we have an array and the userdata that contains the information we wish to display in the component. Still, we also have to allow our user to filter the data shown in searching with the help of an input tag. And this entire functionality takes place under the computed property of the resultQuery.

export default {  name: "HelloWorld", data() {    return {      userData: [        {          image:            "https://pbs.twimg.com/profile_images/1347769407892811786/fJyOAatX_400x400.jpg",          name: "Tunde",          uid: "LfhxERlvyfh2auIY0HnpidjJg3L2",        },        {          name: "bola",          image:            "https://pbs.twimg.com/profile_images/1355220122512863234/0NZI8bzI_400x400.jpg",          uid: "R6lyXuNwZfc9ztLDfIZBSZLg2QD2",        },        {          uid: " k8ZVBdA9wfetiB8vJV3Qc07NZty1",          image:            "https://pbs.twimg.com/profile_images/1321720900274868224/w5iM_Ads_400x400.jpg",          name: "Supreme",        },      ],      searchQuery: null    };  },  computed: {    resultQuery() {      if (this.searchQuery) {        return this.userData.filter((item) => {          return this.searchQuery            .toLowerCase()            .split(" ")            .every((v) => item.name.toLowerCase().includes(v));        });      } else {        console.log(this.userData);        return this.userData;      }    },  }, }; You can also try this code with Online Javascript Compiler Run Code

In the template that we use, SearchQuery helps search the input tag and the data returned from the resultQuery.

<template>  <div>    <input v-model="searchQuery" type="text" placeholder="Search the name">    <div      class="Chatroom__list__messages"      v-for="result in resultQuery"      :key="result.image"    >      <div class="Chatroom__list__messages__img">        <img :src="result.image" />      </div>      <div class="Chatroom__list__messages__message">        <div class="Chatroom__list__messages__message__name">          <div class="Chatroom__list__messages__message__name__indi">            {{result.name}}          </div>          <div class="Chatroom__list__messages__message__name__time">            yesterday          </div>        </div>        <div class="Chatroom__list__messages__message__details">          message from supreme        </div>      </div>    </div>  </div> </template> You can also try this code with Online Javascript Compiler Run Code

So here, the resultQuery checks if the user has given anything in the input tag bound to the searchQuery. Then, it attempts to filter out the userData.name. If the user does not search anything, it returns the complete userData array.

Calculations

Now we can also use some computed properties to get our calculations sorted. We only need to pass the dependency directly into the property and then write the specific calculation that we wish to execute, hence returning the answer.

<script> export default { name: "ComputedCalculation", data() { return {    number: 2  } }, computed: {  totalMarks() {    return this.number * 2;  } } }; </script> You can also try this code with Online Javascript Compiler Run Code

We have a property (totalMarks) that is passed in the dependency(number) from the function(data) and then multiplied by two:

<template>  <div class="hello">    <h1>{{ totalMarks }}</h1>  </div> </template> You can also try this code with Online Javascript Compiler Run Code

In this template, we are simply calling the computed property name within it, and then the value gets displayed in the component directly. 

Boolean conditionals with the v-if

We can use the computed properties to check if a condition is true and then use the v-if inside our template to check whether to display a particular block of code or not.

Here, the displayBoolean is initially true by default and is then set as a dependency to our computed property display. Within the presentation, we check if the display property is true. If true, then we return true, or else we return false.

<script> export default { name: "HelloWorld", data() { return {    displayBoolean: true  } }, computed: {  display() {    if(this.displayBoolean) {      return true    }    else return false  } } }; </script> You can also try this code with Online Javascript Compiler Run Code

The result from the display is sent to the v-if in the template we use to check whether the block of code will be displayed or hidden. We then create a toggle button to toggle the values of the displayBoolean.

<template>  <div class="hello">    <h2 v-if="display">Display conditionally</h2>    <button @click="displayBoolean = !displayBoolean">Toogle</button>  </div> </template> You can also try this code with Online Javascript Compiler Run Code

Using Computed Properties as mapgetters

Let's consider that we are using the mapGetter, and we can get the computed properties in use to access the data that is being retrieved from our getters.

In the code below, the first thing we do is rename our getter from getChatInfo to chatData. Then we return the data inside our getter using the chatInfo computing property.

<script> import { createNamespacedHelpers } from "vuex"; const { mapGetters } = createNamespacedHelpers("chat"); export default { name: "Chat", computed: {    ...mapGetters({      chatData: "getChatInfo",    }),    chatInfo() {      console.log(this.chatData);      return this.chatData;    },  }, }; </script> You can also try this code with Online Javascript Compiler Run Code

<template>  <div class="hello">    <h1>{{ chatInfo.name }}</h1>    <h1>{{ chatInfo.message }}</h1>  </div> </template> You can also try this code with Online Javascript Compiler Run Code

FAQs

1. What are Computer Properties?
   In VueJs, the computed properties are handy to manipulate the already existing data. These properties are cached-based, which means that the function runs only once until the values are not modified.
    
2. What is debugging of Computed Properties?
   The computed properties can accept a second argument using onTrack and onTrigger options. These arguments only work in the development mode. Let's learn more about these in detail with an example,
   →onTrack: When we use the onTrack argument, this argument is called when a reactive property or reference is tracked as a dependency.
   →onTrigger: When using the onTrigger argument, it is called when the watcher callback is triggered due to the mutation of the dependency.
    
3. How can you use computed properties as mapgetters?
   Let's consider that we are using the mapGetter; we can get the computed properties in use to access the data that is being retrieved from our getters

Key Takeaways

Hey everyone, so let's briefly describe the computed properties in VueJs. If you want to learn more about VueJs, do give this official documentation a read. 

• This article covers what is Computed Properties.
• We have further discussed how easily we can use them for different tasks.
• Further, we have seen how to use them as mapgetters.

Isn’t Web Development engaging? Building new websites and using amazing animations and different APIs, don’t be scared if you cannot grasp the hold of this vast development. We have the perfect web development course for you to make you stand out from your fellow developers. 
 

Happy Learning Ninjas!