Watchers

So, how can we add/remove classes from thebodyif it's out of Vue's dominion? We'll have to do it the old-fashioned way with the browser's Web API. We need to run the following statements when the modal is opened or closed:

// Modal opens
document.body.classList.add('modal-open');

// Modal closes
document.body.classList.remove('modal-closed');

As discussed, Vue adds reactive getters and setters to each data property so that when data changes it knows to update the DOM appropriately. Vue also allows you to write custom logic that hooks into reactive data changes via a feature calledwatchers.

To add a watcher, first add thewatchproperty to your Vue instance. Assign an object to this where each property has the name of a declared data property, and each value is a function. The function has two arguments: the old value and new value.

Whenever a data property changes, Vue will trigger any declared watcher methods:

var app = new Vue({
  el: '#app'
  data: {
    message: 'Hello world'
  },
  watch: {
    message: function(newVal, oldVal) {
      console.log(oldVal, ', ', newVal);
    }
  }
});

setTimeout(function() {
  app.message = 'Goodbye world';
  // Output: "Hello world, Goodbye world";
}, 2000);

Vue can't update thebodytag for us, but it can trigger custom logic that will. Let's use a watcher to update thebodytag when our modal is opened and closed.

app.js:

var app = new Vue({
  data: { ... },
  watch: {
    modalOpen: function() {
      var className = 'modal-open';
      if (this.modalOpen) {
        document.body.classList.add(className);
      } else {
        document.body.classList.remove(className);
      }
    }
  }
});

Now when you try to scroll the page you'll see it won't budge!