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?
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.
fieldset from breaking your grid layout (for example) by setting display: contents; style to it.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;
}
});
}
});
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>
Now you just need to wrap your fields inside <v-form :disabled="variable"></v-form>
