Property or method "validaton" is not defined on the instance but referenced during render.

[shahabgohar]

trafficstars

I have strange error while using this package. It works fine in one component but when i use it another component it gives this error

import SimpleVueValidation from 'simple-vue-validator'; Vue.use(SimpleVueValidation);

<div v-bind:class="{'material-form-group':true,'has-error':validation.hasError('email')}">
        <input type="text" v-model.trim="email" required="required"/>
        <label  class="control-label">email</label><i class="bar"></i>
        <strong v-if="validation.hasError('email')">{{validation.firstError('email')}}</strong>
    </div>
    <div v-bind:class="{'material-form-group':true,'has-error':validaton.hasError('password')}">
        <input type="password" v-model="password"  required="required"/>
        <label  class="control-label">password</label><i class="bar"></i>
        <strong v-if="validation.hasError('password')">{{validation.firstError('password')}}</strong>
    </div>

[aleciambarella]

Hey, It looks like you have a typo error in this code snippet <div v-bind:class="{'material-form-group':true,'has-error':validaton.hasError('password')}"> <input type="password" v-model="password" required="required"/> <label class="control-label">password</label><i class="bar"></i> <strong v-if="validation.hasError('password')">{{validation.firstError('password')}}</strong> </div> In the first line <div v-bind:class="{'material-form-group':true,'has-error':validaton.hasError('password')}"> just change where is typed validaton to validation!