VueJS 2和Vee-Validate

Question

在玩了文档等之后。我在使用..时遇到了一些问题。我将在下面粘贴代码。

<!-- Subject FIeld -->
  <div class="field">
    <p :class="{ 'control': true, 'has-icon': true, 'has-icon-right': true }">
      <input name="onderwerp" v-validate="'required|alpha|min:3'" :class="{'input': true, 'is-danger': fields.failed('onderwerp'), 'is-success': fields.passed('onderwerp') }" type="text"  id="onderwerp" placeholder="Onderwerp">
      <span v-show="fields.failed('onderwerp') || fields.passed('onderwerp')" class="icon is-small">
        <i :class="{ 'fa': true, 'fa-warning': fields.failed('onderwerp'), 'fa-check': fields.passed('onderwerp') }"></i>
      </span>
    </p>
  </div>
  <!-- Question Field -->
      <div class="field">
        <!--{{--<label class="label">Vraag</label>--}}-->
    <p :class="{ 'control': true, 'has-icon': true, 'has-icon-right': true }">
      <textarea v-validate="'required|alpha|min:10'" :class="{'textarea': true, 'is-danger': errors.has('vraag') }" name="vraag" id="vraag" placeholder="Vraag"></textarea>
      <span v-show="errors.has('vraag')" class="icon is-small"><i class="fa fa-warning"></i></span>
    </p>
  </div>
  <!--test Field-->
  <div class="field">
    <!--{{--<label class="label">Vraag</label>--}}-->
    <p :class="{ 'control': true, 'has-icon': true, 'has-icon-right': true }">
      <textarea name="testfield" v-validate="'required|alpha|min:10'" :class="{'textarea': true, 'is-danger': fields.failed('testfield'), 'is-success': fields.passed('testfield') }" id="testfield" placeholder="Vraag"></textarea>
      <span v-show="fields.failed('testfield') || fields.passed('testfield')" class="icon is-small">
        <i :class="{ 'fa': true, 'fa-warning': fields.failed('testfield'), 'fa-check': fields.passed('testfield') }"></i>
      </span>
    </p>
  </div>

脚本代码：

    <script>
  export default {
    name: 'Contact-Form',
    data: () => ({
      name: '',
      telefoon: '',
      email: '',
      onderwerp: '',
      testfield: '',
      vraag: ''
    })
  };
</script>

一切正常，除非我删除问题字段部分。 然后，整个表格将按预期停止工作。

有人知道这正在发生吗？

提前致谢！

Answer 1

固定：

您必须显示一个错误，可以将其隐藏或其他任何需要呈现的错误。

<span v-show="fields.failed('fieldname')" class="hidden">{{ errors.first('fieldname') }}</span>

这将修复表单检查。 ;）