Ratchet Vue.js modal switch

rachet-modal-switch.js

// v-on:click handlers can only take one expression, so you can't close
// a modal and update vars in one. This function updates vars on the
// current Vue object, closes a modal (based on CSS selector) and,
// optionally, opens another modal after a delay to all appear smooth
modalNav: function(vars, close, open) {
  for (var attr in vars) { this[attr] = vars[attr]; }
    document.querySelectorAll(close)[0].classList.remove('active')
    if (typeof open !== 'undefined') {
      window.setTimeout(function () {
      document.querySelectorAll(open)[0].classList.add('active')
    }, 250);
  }
},

Only works with top-level values in data and cannot set, for example, array items.