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>

這將修復表單檢查。 ;）