Computed Setters

In the last exercise, you saw how to write maintainable and declarative computed properties that are reusable and reactive and can be called anywhere within your component. In some real-world cases when a computed property is called, you may need to call an external API to correspond with that UI interaction or mutate data elsewhere in the project. The thing that performs this function is called a setter.

Computed setters are demonstrated in the following example:

data() {
  return {
    count: 0
  }
},
computed: {
    myComputedDataProp: {
      // getter
      get() {
        return this.count + 1
      },
      // setter
      set(val) {
        this.count = val - 1
        this.callAnotherApi(this.count)
      },
    },
  },
}

By default, computed data is a getter only, which means it will only output the outcome of your expression. In this example, the computed myComputedDataProp data prop will output 1 in your Vue component:

  get() {
    return this.count + 1
  },

Then, using a setter in a computed property allows you to reactively listen to data and run a callback (setter) that contains the returned value from the getter, which can optionally be used in the setter.

In this example, the setter will update the data prop count to its new value (reflected in the getter) and then call a method within the component called callAnotherApi. Here, we pass in the count data prop to mimic sending this information somewhere useful:

  set(val) {
    this.count = val - 1
    this.callAnotherApi(this.count)
  },

You will find out exactly how to use computed data as both getters and setters in the following exercise.

Exercise 2.02: Using Computed Setters

In this exercise, you will use a computed prop as a setter and a getter, which will both output expressions and set data when triggered by a user's input.

To access the code files for this exercise, refer to https://packt.live/2GwYapA.

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

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

   Go to https://localhost:8080.

2. Create an input field with a v-model value bound to a computed data value called incrementOne, return the value of a Vue data variable called count in the getter, and set the count variable in the setter:

   <template>
     <div class="container">
       <input type="number" v-model="incrementOne" />
       <h3>Get input: {{ incrementOne }}</h3>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         count: -1,
       }
     },
     computed: {
       incrementOne: {
         // getter
         get() {
           return this.count + 1
         },
         // setter
         set(val) {
           this.count = val - 1
         },
       },
     },
   }
   </script>

   The output of the preceding code will be as follows:

   

   Figure 2.3: First steps of a computed setter and getter

3. Next, let's utilize the setter again. We will divide whatever the new val argument is by 2, and save that to a new data variable called divideByTwo:

   <template>
     <div class="container">
       <input type="number" v-model="incrementOne" />
       <h3>Get input: {{ incrementOne }}</h3>
       <h5>Set division: {{ divideByTwo }}</h5>
     </div>
   </template>
   <script>
   export default {
     data() {
       return {
         count: -1,
         divideByTwo: 0,
       }
     },
   ...
   </script>
   ...

4. Update the setter to divide val by 2, and bind this new value to the divideByTwo variable:

         set(val) {
           this.count = val - 1
           this.divideByTwo = val / 2
         },

   The output of the divideByTwo value should generate an outcome from the value entered in the input field, as follows:

   

Figure 2.4: The outcome of the divideByTwo value

In this exercise, we saw how we can use computed data to both get and set data reactively in our template by binding computed variables to the v-model.