Vue Data
Computed Property Setters

Being able to generate computed properties based on data is super useful. But why limit ourselves by only allowing this data flow to only go one way?

Vue allows us to not only determine computed values based on data values but to also update the necessary data values if a computed value ever changes! This allows our users to potentially edit computed values in the front-end and have all of the corresponding data properties get changed in response so that the computed property will re-calculate to the user’s chosen value.

const app = new Vue({ el: '#app', data: { hoursStudied: 274 }, computed: { languageLevel: { get: function() { if (this.hoursStudied < 100) { return 'Beginner'; } else if (this.hoursStudied < 1000) { return 'Intermediate'; } else { return 'Expert'; } }, set: function(newLanguageLevel) { if (newLanguageLevel === 'Beginner') { this.hoursStudied = 0; } else if (newLanguageLevel === 'Intermediate') { this.hoursStudied = 100; } else if (newLanguageLevel === 'Expert') { this.hoursStudied = 1000; } } } } });
<div id=“app”> <p>You have studied for {{ hoursStudied }} hours. You have {{ languageLevel }}-level mastery.</p> <span>Change Level:</span> <select v-model="languageLevel"> <option>Beginner</option> <option>Intermediate</option> <option>Expert</option> </select> </div>

In this example:

  • We modified our computed languageLevel value to contain both a getter and a setter method. We did this by making the value of languageLevel an object with two keys, get and set, each with a value of a function.
  • The get function is the same function we used earlier, computing the value of languageLevel based on hoursStudied.
  • The set function updates other data whenever the value of languageLevel changes. set functions take one parameter, the new value of the computed value. This value can then be used to determine how other information in your app should be updated. In this case, whenever languageLevel changes, we set the value of hoursStudied to be the minimum number of hours needed to achieve that mastery level.
  • Finally, we added a <select> field to our template that allows users to change their mastery level. Don’t worry about this part of the logic yet, we will cover this information in Vue Forms.



When our “Ticket Box” app is finished, we will use fullName to sign the purchase agreement. However, we will make the signature field editable so users can edit firstName and lastName by editing fullName. Let’s add a setter function to fullName to make this possible.

First, we will need to modify our current fullName functionality to be an object to support both a getter and a setter.

Make the value of fullName in computed an object. Add a key called get to that object and make the value equal to the current fullName function.

We’ve included this function below in case you need it:

function() { if (this.firstName && this.lastName) { return this.firstName + ' ' + this.lastName; } else { return this.firstName || this.lastName; } }

Now we can add our setter.

Add a key called set to fullName‘s object. Make the value of this property the following function:

function(newFullName) { const names = newFullName.split(' '); if (names.length === 2) { this.firstName = names[0]; this.lastName = names[1]; } if (names.length <= 1) { this.firstName = names[0] || ''; this.lastName = ''; } }

This method will take in new fullName values and set firstName and lastName based on the updated value.

We’ve temporarily hooked up the “First Name” (firstName), “Last Name” (lastName), and “Signature” (fullName) fields in the site (you’ll learn how to do this in Vue Forms). Try filling out the “First Name” and “Last Name” fields and then modifying the “Signature” field to see firstName and lastName automatically get updated.

Folder Icon

Sign up to start coding

Already have an account?