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收到消息时 - 它没有出现在我为show recaptcha错误指定的div中。我在div控制台标签中看到DOM，我在<strong></strong>中看到错误的文字，但我实际上并没有在页面上看到它。怎么了？ reCaptcha邻居可能会阻止显示其他元素？

我还有其他一些群组，其中包含input + div，可能会出现错误，并且没有任何问题可以显示错误。

更新：我注意到只有div class="invalid-feedback" display: none为div。具有相同类的所有其他display: block都有<template> <v-btn color="accent" large @click.stop="showScheduleForm=true"> <ScheduleForm v-model="showScheduleForm" /> </template> <script> import ScheduleForm from '~/components/ScheduleForm' export default { data () { return { showScheduleForm: false } }, components: { ScheduleForm } } </script>。

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>

带有reCaptcha错误的Div将不会显示

1 个答案: