VueJS 2とVee-Validate

Question

docsなどで遊んだ後で、私はいくつかの問題を抱えています。以下のコードを貼り付けます。

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

これでフォームチェックが修正されます。 ;）