is-invalid 引导类如何工作？

Question

我有一个输入，它工作正常：从服务器返回错误后，我看到{{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>

所以我猜，div 和 class="invalid-feedback" 从 display: none 变为 display: block 只有当 div div 具有 class="invalid-feedback" 在同一个 DOM 级别上 与<input class="form-control is-invalid">。

<div>
    <input class="form-control" :class="{' is-invalid': errors.foo}">
    <div class="invalid-feedback" v-if="errors.foo">
        <!-- this example would work -->
    </div>
</div>

---

<div>
    <input class="form-control" :class="{' is-invalid': errors.foo}">
</div>
<div>
    <div class="invalid-feedback" v-if="errors.foo">
        <!-- this example would not work
             because error div isn't on the same DOM level with input -->
    </div>
</div>

我说的对吗？在docs 中没有找到关于 DOM 的任何内容。

如果是，当我想在 div 和 class="invalid-feedback" 中显示错误，但“已连接”输入不在同一个 DOM 级别时，什么解决方法适用于这种情况？其实我想让我的第二个例子工作。

更新：我可以在 <div class="invalid-feedback"> 所在的同一 DOM 级别添加一些 <div class="form-control" :class="{' is-invalid': errors.foo}" style="display: none;">，但它会是意大利面条代码。

Answer 1

您在invalid-feedback div 上使用v-if="errors.foo"，因此只有当errors.foo 为真实时，它才会插入到DOM 中，无论它在哪里DOM.

关于造型：

HTML 表单验证通过 CSS 的两个伪类 :invalid 和 :valid 应用。它适用于<input>、<select> 和<textarea> 元素。

所以.invalid-feedback div 的位置很重要在使用默认行为时，它使用general sibling combinator ~ 应用样式

.was-validated .form-control:invalid~.invalid-feedback {/*...*/}

您应该在父元素上添加一个 .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，如 d-block。

作为后备，.is-invalid 和 .is-valid 类可以代替伪类用于服务器端验证。 它们不需要.was-validated 父类。

这是.input-group discussed in an issue 的一个已知问题。

---

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

或者您可以使用引导程序的 Vue 包装器，例如 bootstrap-vue。