30 Days of Vue

Watchers

 

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

Watchers

Yesterday, we discussed how methods and computed properties work within a Vue instance. Today, we’ll briefly discuss another instance property called watchers (or sometimes known as the watch property).

Watchers

The watch property in Vue essentially allows us to perform work in reaction to specific data changes.

To see an example of watchers, we’ll create a simple app that contains two input fields - one to capture the distance in kilometers and the other in meters:

When the user types information in one particular field, we want the other input field to automatically display the equivalent value in its own unit. For example, when the user types the number 1 into the KM input field - the M input field should automatically display 1000 (1KM === 1000M).

To get things started, we’ll instantiate a Vue instance that contains km and m data properties both initialized with values of 0.

new Vue({
  el: '#app',
  data: {
    km: 0,
    m: 0
  }
});

We’ll use the v-model directive to bind the km and m data properties to two separate input fields. Specifying placeholders and declaring input type=number to both fields will have our template look something like the following:

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet"
      href="https://unpkg.com/[email protected]/css/bulma.css" />
  </head>

  <body>
    <div id="app">
      <div class="field">
        <label class="label">KM</label>
        <input v-model="km"
                class="input"
                type="number"
                placeholder="Type a length in KM!">
      </div>
      
      <div class="field">
        <label class="label">M</label>
        <input v-model="m"
                class="input"
                type="number"
                placeholder="Type a length in M!">
      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

To achieve the desired outcome of having one input field be updated in response to the change in the other - we can use the watch property. To watch the change in the KM input field, we’ll declare the watch property to watch the km data value in our instance:

new Vue({
  el: '#app',
  data: {
    km: 0,
    m: 0
  },
  watch: {
    km() {
      // whenever km changes, this function runs
    },
  }
});

Since we also want the KM input field to be updated in response to changes in the M input field, we’ll also declare a watcher on the m data value:

new Vue({
  el: '#app',
  data: {
    km: 0,
    m: 0
  },
  watch: {
    km() {
      // whenever km changes, this function runs
    },
    m() {
      // whenever m changes - this function runs
    }
  }
});

The functions we’ve declared within the watch property are run whenever the km or m data values have been changed respectively. This is how we’re essentially watching these properties.

Watch properties automatically provide payloads of the new value upon change and the old value prior to the change:

watch: {
  property(newVal, oldVal) {
    // ...
  }
}

For our application - we don’t need access to the old values, and the new values would be equal to the properties being watched. As a result, we won’t have the need to use any of these parameters.

As each watch function runs, we’ll update the other data property by either multiplying or dividing the watched property by 1000:

new Vue({
  el: '#app',
  data: {
    km: 0,
    m: 0
  },
  watch: {
    km() {
      this.m = this.km ? this.km * 1000 : 0;
    },
    m() {
      this.km = this.m ? this.m / 1000 : 0;
    }
  }
});

We’re using the ternary operator to update the value of the non-watched input to 0 if the watched property is ever invalid. Now, whenever a value is entered in an input; the other input field will be updated to show the change!

Live version - https://30dofv-watchers.surge.sh

Awesome! Though this works perfectly well, a good question to ask right now would be - do we need watchers to do what we just did?

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

No spam ever. Easy to unsubscribe.