VueJS 2 和 Vee-Validate答案

【问题标题】：VueJS 2 and Vee-ValidateVueJS 2 和 Vee-Validate
【发布时间】：2017-03-28 07:10:59
【问题描述】：

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

<!-- 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>

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

有人知道这是怎么回事吗？

提前致谢！

【问题讨论】：

您能提供更多信息吗？ Fiddle without question field 似乎工作正常。您是否在控制台中遇到错误？
是的，这有效，并且 testfield 与复选标记一样有效。但是当我删除问题字段时，它不会。完全没有错误。检查只是不起作用。 :
只需从上面编辑小提琴，以便我理解
我做到了，当您删除问题字段部分时...它不再起作用了..

标签： javascript vuejs2

【解决方案1】：

固定：

您必须显示错误，可以将其隐藏或其他任何需要渲染的内容。

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

这将修复表单检查。 ;)

【讨论】：