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

[shahabgohar]

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>

<script> import {Validator} from 'simple-vue-validator'; export default { name: "RegisterationComponent", data(){ return { email:'', password:'' } }, validators:{ email:function(value){ return Validator.value(value).required().email(); }, password:function(value){ return Validator.value(value).required(); } }, methods:{ register:function(){ this.$validate().then(function(success){ if(success){ alert('success'); } }) } } } </script>

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