Adding Getters & Setters to Computed Properties in Vue.js

Published on March 13, 2017 by

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!

Featured

Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

4 comments on »Adding Getters & Setters to Computed Properties in Vue.js«

  1. Antonio Ramos

    What if i use vuex
    then i my component i will use mapGetters
    In this context how to use the get/set?
    in my case i have a dialog

    dialog is
    …mapGetters ({
    dialog:’contracts/getDialog’
    }),

    but i get this error
    vuex-computed-property-dialog -was-assigned-to-but-it-has-no-setter

  2. Zween

    Hi Bo Andersen :)

    Thanks for this article very useful.
    Just noticed that in the second paragraph you say “Computed properties are getter-only by default, but if you need to, you can also specify a GETTER. ” I think you wanted to say instead “Computed properties are getter-only by default, but if you need to, you can also specify a SETTER. “

  3. You are absolutely right – fixed. :-) Thanks so much for the heads up! ;-)

  4. Christian Werner

    What if I want to do it with a computed array? I actually tried, but it is not working :(

Leave a Reply

Your e-mail address will not be published.