Skip to Content
Learn
Vue Data
Watchers

So far we’ve learned that data is used to store known dynamic data and computed is used to store dynamic data that is computed using other pieces of dynamic data. However, there is one caveat.

A computed value will only recompute when a dynamic value used inside of its getter function changes. For example, in our previous examples languageLevel would only be recomputed if hoursStudied changed. But what do we do if we want to make app updates without explicitly using a value in a computed function? We use the watch property.

const app = new Vue({ el: '#app', data: { currentLanguage: 'Spanish', supportedLanguages: ['Spanish', 'Italian', 'Arabic'], hoursStudied: 274 }, watch: { currentLanguage: function (newCurrentLanguage, oldCurrentLanguage) { if (supportedLanguages.includes(newCurrentLanguage)) { this.hoursStudied = 0; } else { this.currentLanguage = oldCurrentLanguage; } } } });

In this example, we want to set the number of hours studied to 0 whenever the user changes languages to a new supported language. If the language is not supported, it reverts the language back to the previously-selected language.

This functionality is not a computed value because we do not actually need to continually use this information to compute a new dynamic property: we just need to update existing properties whenever the change happens.

The value of watch is an object containing all of the properties to watch. The keys of this object are the names of the properties to watch for changes and the values are functions to run whenever the corresponding properties change. These functions take two parameters: the new value of that property and the previous value of that property.

Note: It may seem like you could use watch in many instances where you could use computed. The Vue team encourages developers to use computed in these situations as computed values update more efficiently than watched values.

Instructions

1.

Let’s add a watcher to our app. As we go on to build more complex apps, watch will become even more important. For this app, though, we are just going to do something a little fun. Whenever a user types "meet and greet" or "meet-and-greet" into the special requests field, we will automatically upgrade their tickets to VIP.

Add a watch property to the options object. For now, make the value an empty object, {}.

2.

Now, let’s watch specialRequests for changes.

Add a key to watch called specialRequests and make the value the following function:

function(newRequests, oldRequests) { if (newRequests.toLowerCase().includes('meet and greet') || newRequests.toLowerCase().includes('meet-and-greet')) { this.ticketType = 'vip'; } }

This function will check the updated special requests for mentions of “meet and greet” and change the ticket type to VIP if any exist.

We’ve temporarily tied the “Ticket Type” (ticketType) and “Special Requests” (specialRequests) fields on the site to the corresponding pieces of data in your Vue app (don’t worry, you’ll learn how to do this in Vue Forms). Try writing “meet and greet” into the “Special Requests” field to see ticketType automatically get updated.

Folder Icon

Sign up to start coding

Already have an account?