In the previous post we saw how and when to use computed properties. In this post, I want to show you how to use getters and setters with computed properties.

Computed properties are getter-only by default, but if you need to, you can also specify a setter. To do this, we actually need to change our computed property from a function to an object with two properties; get and set. These properties are functions that are invoked when we use the computed property to retrieve and update the value, respectively. Let’s begin to restructure the property.

computed: {
	fullName: {
		get: function() {
      
		},
		set: function(newValue) {

		}
	}
}

The logic to retrieve the property’s value is going to remain the same, so I can simply copy in the code from the old function.

get: function() {
	alert("Assembling full name...");
	return this.firstName + ' ' + this.lastName;
}

As for the set function, you might have noticed that I added a newValue parameter. As the name of the parameter suggests, it will contain the new value whenever we assign a new value to the computed property. Since I will be assigning the full name as a whole, I need to do a bit of splitting to accomplish the same behavior as before. I will also add an alert for this function so we can see when it gets called. Then I will simply split the value by space and assign the first part to the firstName data property and the last part to the lastName property.

set: function(newValue) {
	alert("Setting new name: " + newValue);
	var parts = newValue.split(' ');
	this.firstName = parts[0];
	this.lastName = parts[parts.length - 1];
}

So within the set function, I simply update the data properties as I did within the other event listener.

So far so good. Let’s now get to actually using these functions. The next thing I will do, is to add a new button which will use the setter that we will implement.

<button v-on:click="changeNameSetter">Change Name (setter)</button>

I will also need to add a new event listener for this button.

methods: {
  	// ...
	changeNameSetter: function() {

	}
}

To use the setter function, all we need to do, is to assign a new value to the computed property as if it were a normal data property. So I can just say this.fullName = ‘Mark Gonzales’. Vue.js will automatically detect this and invoke the setter function. Let’s be honest, this is pretty awesome!

changeNameSetter: function() {
	this.fullName = 'Mark Gonzales';
}

That’s it! We don’t need to do anything to invoke the getter function; this is done automatically when we access the computed property. Time to see our new code in action!

When clicking the new button, we see an alert displaying the name that we are setting, proving that our setter function is indeed invoked. If I close this dialog, we will see a new alert, this time from the getter function. This alert shows up because we just changed the value of the computed property, and therefore Vue.js will reactively update the DOM with the new value. And there you have it, that’s how to use getters and setters with computed properties!