Vue: need to disable all inputs on page

vue.js vue-directives

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;      }    });  }});

vue.js vue-directives

I'am coming a bit late, but there is an attribute on the HTML element called "disabled", which ... disable every input in the tree.

<fieldset :disabled="!canEdit">  ...</fieldset>

canEdit could be a computed property or anything you want.

vue.js vue-directives

You can do something like this:

let elems = document.getElementById('parentDiv').getElementsByTagName('input');

This will give you all the inputs inside a parent, then you can run a simple for loop to loop over them and set each one to disabled.

Something like this:

for(let i = 0; i < elems.length; i++) {    elems[i].disabled = true;}

Hope this helps set you on the right path.

let elems = document.getElementById('someid').getElementsByTagName('input');console.log(elems);for(let i = 0; i < elems.length; i++) {  elems[i].disabled = true;}

<html>  <body>    <div id="someid">      <input type="text">      <input type="text">      <input type="text">      <input type="text">      <input type="text">    </div>  </body></html>

Expand snippet