Computed Properties

Computed properties are a unique data type that will reactively update when source data used within the property is updated. They may look like a Vue method, but they are not. In Vue, we can track changes to a data property by defining them as a computed property, add custom logic within this property, and use it anywhere within the component to return a value. Computed properties are cached by Vue, making them more performant for returning data than a data prop or using a Vue method.

Instances where you may use a computed property include but are not limited to:

• Form validation:

  In this example, an error message will appear when the total data property is less than 1. The computed property for total will update every time a new piece of data is added to the items array:

  <template>
      <div>{{errorMessage}}</div>
  </template>
  <script>
      export default {
          data() {
              return {
                  items: []
              }
          },
          computed: {
              total() {
                  return this.items.length
              },
              errorMessage() {
                  if (this.total < 1) {
                      return 'The total must be more than zero'
                  } else {
                      return ''
                  }
              }
          }
      }
  </script>

  This will generate the following output:

  The total must be more than zero

• Combining data props:

  In the following example, you can use computed props to combine two pieces of data into one returnable string, formalName, that can be used within your component:

  <template>
      <div>{{ formalName }}</div>
  </template>
  <script>
      export default {
          data() {
              return {
                  title: 'Mr.',
                  surname: 'Smith'
              }
          },
          computed: {
              formalName() {
                  return this.title + ' ' + this.surname
              }
          }
      }
  </script>

  This will generate the following output:

  Mr. Smith

• Outputting complex information into the Vue template:

  In this more complicated example, we use computed properties to break down the large data object called post. You will use the simplified and semantic computed properties to output the information into your components template. The computed properties in this example make it easier to identify and use the author's full name, see how many posts they have produced, and have the data to display their featured post:

  <template>
      <div>
          <p>{{ fullName }}</p>
          <p>{{ totalPosts }}</p>
          <p>{{ featuredPosts }}</p>
      </div>
  </template>
  <script>
      export default {
          data() {
              return {
                  post: {
                      fields: {
                          author: {
                              firstName: 'John',
                              lastName: 'Doe'
                          },
                          entries: [{
                                  title: "Entry 1",
                                  content: "Entry 1's content",
                                  featured: true
                              },
                              {
                                  title: "Entry 2",
                                  content: "Entry 2's content",
                                  featured: false
                              }
                         ]
                      }
                  }
              }
          },
          computed: {
              fullName() {
                  // Return string
                  return this.post.fields.author.firstName + ' ' +                  this.post.fields.author.lastName
              },
              totalPosts() {
                  // Return number
                  return this.post.fields.entries.length
              },
              featuredPosts() {
                  // Return string
                  return this.post.fields.entries.filter(entry => {
                      // If featured is true, return the entry title
                      if (entry.featured) {
                          return entry
                      }
                  })
              }
          }
      }
  </script>

  This will generate the following output:

  

Figure 2.1: The computed name output

Computed properties are very valuable to a Vue developer when creating performant components. In the next exercise, we will explore how to use this inside of a Vue component.

Exercise 2.01: Implementing Computed Data into a Vue Component

In this exercise, you will use a computed property to help cut down the amount of code you need to write inside your Vue templates by concisely outputting basic data. To access the code files for this exercise, refer to https://packt.live/3n1fQZY.

1. Open a command-line terminal, navigate into the Exercise 2.01 folder, and run the following commands in order:

   > cd Exercise2.01/
   > code .
   > yarn
   > yarn serve

   Go to https://localhost:8080.

2. Create an input field for the first name, use v-model to bind the data prop firstName to this field:

   <input v-model="firstName" placeholder="First name" />

3. Create a second input field for the last name, and use v-model to bind the data prop lastName to this field:

   <input v-model="lastName" placeholder="Last name" />

4. Include these new v-model data props in the Vue instance by returning them in the data() function:

   data() {
       return {
         firstName: '',
         lastName: '',
       }
     },

5. Create a computed data variable called fullName:

   computed: {
       fullName() {
         return `${this.firstName} ${this.lastName}`
       },
     },

6. Underneath your input fields, using heading tags, output the computed data:

   <h3 class="output">{{ fullName }}</h3>

   This will generate the following output:

   

Figure 2.2: Output of the computed data will show the first and last name

In this exercise, we saw how we can write an expression inside a computed data property using data from the v-model and combine the first name and last name into a single output variable that can be reused.