Vue: need to disable all inputs on page

Question

I'm developing an app that has different license types, and according to the license we need to disable/enable inputs.

One way is to put a conditional :disabled for each input but that's a lot of work and error prone, since we might forget to put it on some inputs.

I thought of using a directive like v-disable-all that searches for all inputs under the container and adds disabled to them.

I was wandering if there is a better solution or if there is already a solution like this?

Answer 1

I ended up creating this directive:

import Vue from "vue";

Vue.directive("disable-all", {
  // When all the children of the parent component have been updated
  componentUpdated: function(el, binding) {
    if (!binding.value) return;
    const tags = ["input", "button", "textarea", "select"];
    tags.forEach(tagName => {
      const nodes = el.getElementsByTagName(tagName);
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].disabled = true;
        nodes[i].tabIndex = -1;
      }
    });
  }
});