是否可以使用 VueJS 和 BootstrapVue 禁用页面中的所有输入？答案

【问题标题】：Is it possible to disable all the inputs from a page with VueJS and BootstrapVue?是否可以使用 VueJS 和 BootstrapVue 禁用页面中的所有输入？
【发布时间】：2019-07-06 13:24:08
【问题描述】：

我在一页中有多个按钮和表单输入。所有这些按钮和表单输入都需要根据条件禁用或启用。

我知道可以在标签中使用 disabled 关键字来禁用特定的输入或按钮。另外，我可以添加代码

:disabled="true"

根据变量的布尔值禁用输入。但是，这个解决方案对我来说是不可接受的，因为我必须将这行代码添加到我页面上的每个输入中（我将来可能会创建新页面，包含尽可能多的输入）。

我想知道是否有一种方法可以让我简单地禁用所有输入的父容器，以便禁用子项（输入）。

【问题讨论】：

标签： node.js vue.js bootstrap-vue

【解决方案1】：

如果您在运行代码时检查 VM 的 Vue 实例本身，您可以在 console.log(this) 时看到类似的内容，

如果你使用正确的范围，它会给你类似的输出：

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

在 $el 内部有用于访问 firsElementChild、previousElementChild、previousElementSibling 等的对象属性。有很多与 HTML 相关的属性，但是，以这种方式访问 HTML 元素会很快变得混乱。我认为您最好的解决方案是您已经提到或动态更改 CSS 类的解决方案。

如果您使用 v-if 在父对象上进行条件渲染，您也可以实现非常相似的功能。

See: Conditional rendering

【讨论】：