是否可以使用 VueJS 和 BootstrapVue 禁用页面的所有输入？
Is it possible to disable all the inputs from a page with VueJS and BootstrapVue?
我在一页中有多个按钮和表单输入。所有这些按钮和表单输入都需要根据条件禁用或启用。
我知道可以在标签内使用 disabled 关键字来禁用特定的输入或按钮。另外，我可以只添加代码
:disabled="true"
根据变量的布尔值禁用输入。
但是，这个解决方案对我来说是不可接受的，因为我必须将这行代码添加到我页面上的每个输入（我将来可能会创建新页面，包含尽可能多的输入）。
我想知道是否有一种方法可以让我简单地禁用所有输入的父容器，从而禁用子项（输入）。
如果您在 运行 您的代码时检查 VM 的 Vue 实例本身，那么当您 console.log(this),
如果你使用正确的范围，它会给你类似的输出：
{
$attrs
$options
.......
$el
}
在 $el 中有用于访问 firsElementChild、previousElementChild、previousElementSibling 等的对象属性。有很多 HTML 相关属性，但是，以这种方式访问 HTML 元素会很快变得混乱。我认为您最好的解决方案是您已经提到的或动态更改 CSS class 的解决方案。
如果您使用 v-if 在父级上进行条件渲染，您也可以实现非常相似的功能。
我在一页中有多个按钮和表单输入。所有这些按钮和表单输入都需要根据条件禁用或启用。
我知道可以在标签内使用 disabled 关键字来禁用特定的输入或按钮。另外，我可以只添加代码
:disabled="true"
根据变量的布尔值禁用输入。 但是，这个解决方案对我来说是不可接受的，因为我必须将这行代码添加到我页面上的每个输入（我将来可能会创建新页面，包含尽可能多的输入）。
我想知道是否有一种方法可以让我简单地禁用所有输入的父容器，从而禁用子项（输入）。
如果您在 运行 您的代码时检查 VM 的 Vue 实例本身，那么当您 console.log(this),
如果你使用正确的范围，它会给你类似的输出：
{
$attrs
$options
.......
$el
}
在 $el 中有用于访问 firsElementChild、previousElementChild、previousElementSibling 等的对象属性。有很多 HTML 相关属性，但是，以这种方式访问 HTML 元素会很快变得混乱。我认为您最好的解决方案是您已经提到的或动态更改 CSS class 的解决方案。
如果您使用 v-if 在父级上进行条件渲染，您也可以实现非常相似的功能。