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

Posted 2023-02-22

【中文标题】是否可以使用 VueJS 和 BootstrapVue 禁用页面中的所有输入？

【英文标题】：Is it possible to disable all the inputs from a page with VueJS and BootstrapVue?

【发布时间】：2019-07-06 13:24:08

【问题描述】：

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

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

:disabled="true"

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

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

【参考方案1】：

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

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

$attrs
$options
.......
$el

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

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

See: Conditional rendering