Vue.jsでVue.jsで有効な要素をvee-validateで追加する

Question

フォームの検証にVue.jsプラグインであるvee-validateを使用して、入力フィールドの検証後に画像を表示したい。ご覧のとおり、私はv-show="!errors.has('fname')"でこれをやろうとしました。問題は、エラーがないので、検証が行われる前にイメージが既に表示されることです。対応する入力フィールドが有効な場合、どのように画像を表示できますか？

<form> 
    <input v-validate="{rules: {required: true, alpha: true, min: 3}}"type="text" id="fname" name="fname"/> 
    <img v-show="!errors.has('fname')" class="check-icon" src="../../assets/png/check-icon.png" alt="check-icon"/> 
</form> 

Answer 1

v-show="!errors.has('fname') && input is not empty"