Vue: необходимо отключить все входы на странице

Я занимаюсь разработкой приложения с различными типами лицензий, и в соответствии с лицензией нам нужно отключить / включить входы.

Одним из способов является поставить условный :disabled для каждого входа, но это много работы и подвержено ошибкам, так как мы можем забыть поставить его на некоторые входы.

Я думал об использовании такой директивы, как v-disable-all который ищет все входные данные в контейнере и добавляет к ним отключенные.

Я бродил, если есть лучшее решение или уже есть решение, подобное этому?

Источник

2 ответа

В итоге я создал эту директиву:

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;
      }
    });
  }
});
Источник

Я немного опаздываю, но в HTML-элементе есть атрибут под названием "disabled", который... отключает каждый ввод в дереве.

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

canEdit может быть вычисляемым свойством или чем угодно.

Источник

Вы можете сделать что-то вроде этого:

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

Это даст вам все входные данные внутри родительского элемента, после чего вы сможете запустить простой цикл for, чтобы зациклить их и установить каждый из них на отключенный.

Что-то вроде этого:

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

Надеюсь, это поможет вам выбрать правильный путь.

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>

Источник

Теперь вам просто нужно обернуть свои поля внутрь <v-form :disabled="variable"></v-form>

Источник
Другие вопросы по тегам