Можно ли отключить все входы со страницы с помощью VueJS и BootstrapVue?

Question

У меня есть несколько кнопок и формы ввода на одной странице.Все эти кнопки и входы формы должны быть отключены или включены в зависимости от условия.

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

:disabled="true"

, чтобы отключить вводы в зависимости от логического значения переменной.Однако это решение для меня неприемлемо, поскольку мне придется добавлять эту строку кода к каждому входу на моей странице (в будущем я могу создавать новые страницы, содержащие столько входов).

Я хотел бы знать, есть ли способ, позволяющий мне просто отключить родительский контейнер для всех входов, чтобы отключить дочерний элемент (входы).

Answer 1

Если вы проверяете сам экземпляр Vue виртуальной машины при выполнении вашего кода, вы можете получить что-то подобное при консоли.log (this),

Это даст вам вывод, похожий на этот, если вы используетеправильная область действия:

{
$attrs
$options
.......
$el
}

Внутри $ el есть свойства объекта для доступа к firsElementChild, previousElementChild, previousElementSibling и т. д. Существует множество свойств, связанных с HTML, однако доступ к элементу HTML таким способом может стать довольно запутанным.Я думаю, что ваше лучшее решение - это то, о котором вы уже упоминали, или динамическое изменение класса CSS.

Если вы используете v-if для условного рендеринга на родительском объекте, вы также можете получить довольно похожую функциональность.

См .: Условный рендеринг