Html 无效引导类是如何工作的？

我有一个正确工作的输入：在error从服务器返回到客户端之后，我看到

{{value}}

<div class="form-group">
    <label class="col-md-8 control-label">Foo</label>
    <input class="form-control" v-model="foo" :class="{' is-invalid': errors.foo}">
    <div class="invalid-feedback" v-if="errors.foo">
        <strong v-for="value in errors.foo">{{value}}</strong>
    </div>
</div>

---

我说得对吗？没有发现关于DOM的任何信息

如果是，当我想用

class=“invalid feedback”

在

div

中显示错误，但“connected”输入不在同一DOM级别时，什么解决方法适合这种情况？实际上，我想让我的第二个例子起作用

更新：我可以在

所在的同一DOM级别上添加一些

，但它应该是意大利面代码。

您在

无效反馈
div上使用
v-if=“errors.foo”
，因此只有当
出错时才会将其插入DOM中。foo
是真实的，无论它在DOM中的什么位置

至于造型：

HTML表单验证通过CSS的两个伪类应用，
：invalid
和
：valid
。它适用于
、
和
元素

<div :class="{'was-validated': errors.foo}">
    <input class="form-control" :class="{' is-invalid': errors.foo}">
</div>
...
<div :class="{'was-validated': errors.foo}">
    <div class="invalid-feedback" v-show="errors.foo">...</div>
</div>

因此，在使用默认行为时，
.invalid feedback
div的位置非常重要，默认行为将样式应用于

。已验证。表单控件：无效~。无效反馈{/*…*/}

有一个
.was validated
类，您应该将其添加到父元素上，该父元素将在无效元素上应用错误样式

<div :class="{'was-validated': errors.foo}">
    <input class="form-control" :class="{' is-invalid': errors.foo}">
</div>
...
<div :class="{'was-validated': errors.foo}">
    <div class="invalid-feedback" v-show="errors.foo">...</div>
</div>


...
...

由于它必须是一般同级，因此可以使用
v-show
强制执行
display:block
，或使用自定义CSS，如

作为回退，
无效
且
有效
可以使用类而不是伪类进行服务器端验证它们不需要
。已验证
父类。

这是一个已知的问题


如果您发现它开始变得混乱，您可以评估将输入包装到应用您的样式的组件中的可能性，然后重用您的组件

或者您可以使用引导的Vue包装，比如。
我不明白。你能澄清这个问题吗？是吗？@ZimSystem我有一个带有表单的Vue组件。表单中有一个非html标记，用于裁剪图像。该标记呈现一些
，
和其他元素。我想显示错误时，用户试图提交表单没有附加图像。我试图在我的输入中添加
class=“form control”：class=“{”是无效的：errors.foo}”
，但是
中的错误无论如何都不会显示。如果没有显示，值是多少
错误。屏幕截图
？我想这就是验证
的父级的必要之处。你说得对，放置反馈分区时有一个放置要求。我用附加信息更新了我的答案是的，实现这一点的一种方法是将
d-block
添加到
无效反馈
。就留给未来的访客吧。使
再次出错。
<div :class="{'was-validated': errors.foo}">
    <input class="form-control" :class="{' is-invalid': errors.foo}">
</div>
...
<div :class="{'was-validated': errors.foo}">
    <div class="invalid-feedback" v-show="errors.foo">...</div>
</div>