javascript - 带有 reCaptcha 错误的 Div 不会显示

Question

我有一个 reCaptcha里面Vue组件作为我的注册表的一部分:

<div class="form-group">
    <vue-recaptcha sitekey="KEY"></vue-recaptcha>
    <div class="invalid-feedback" v-if="errors.register.recaptcha" v-for="value in errors.register.recaptcha">
        <strong>{{value}}</strong>
    </div>
</div>

问题是当我在 errors.register.recaptcha 中收到消息时- 它没有出现在 div 中我指定用于显示 recaptcha 错误。我看到了 div在 DOM控制台选项卡，我在 <strong></strong> 中看到错误文本，但我实际上并没有在页面上看到它。怎么了？ reCaptcha 邻域可能会阻止显示其他元素？

我还有其他一些包含 input 的组+ div可能出现错误的地方，没有显示错误的问题。

更新:我注意到只有这一个div与 class="invalid-feedback"是display: none .所有其他 div同类有display: block .

Answer 1

通过添加隐藏输入解决

<input class="form-control"
    :class="{' is-invalid': errors.register.recaptcha}"
    hidden>

整个元素可能是

<div class="form-group">
    <input class="form-control"
        :class="{' is-invalid': errors.register.recaptcha}"
        hidden>
    <vue-recaptcha sitekey="KEY"></vue-recaptcha>
    <div class="invalid-feedback" v-if="errors.register.recaptcha" v-for="value in errors.register.recaptcha">
        <strong>{{value}}</strong>
    </div>
</div>