Tutorials / Vue /

An Introduction to Vue Watchers

Jun 18, 2019

In Vue, watchers let you watch a value by registering a callback that Vue will call whenever the value changes.

For example, suppose you had a select tag that asked the user to select between options 'A', 'B', and 'C', and you wanted to implement an "Undo" button that would undo the last change the user made. You can do this by registering a watcher on the value that the select is bound to using v-model.

const app = new Vue({
  data: () => ({ value: 'A', oldValue: 'A' }),
  // The `watch` property is a map from watched properties to callbacks
  watch: {
    value: function(newValue, oldValue) {
      console.log('Name changed from', oldValue, 'to', newValue);
      this.oldValue = oldValue;
    }
  },
  template: `
    <div id="rendered-content">
      <select v-model="value">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <button v-on:click="value = oldValue">Undo</button>
    </div>
  `
});

Here's the undo button example in action.

One common use case for watchers is to persist changes to the server when a value changes. For example, suppose you wanted to send an HTTP request every time the user changes value. You could register a watcher on value, and send an HTTP request in the watch callback as shown below.

const app = new Vue({
  data: () => ({ value: 'A', saved: false }),
  watch: {
    value: function() {
      const body = JSON.stringify(this.data);
      fetch('http://httpbin.org/post', { method: 'POST', body }).
        then(() => { this.saved = true; });
    }
  },
  template: `
    <div id="rendered-content">
      <select v-model="value">
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <div v-if="saved" id="saved">Saved!</div>
    </div>
  `
});

Here's a live example of the HTTP request watcher.

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

An Introduction to Vue Watchers

More Vue Tutorials