CODEWITHSUNDEEP
vue.jsvuejs2
the_peacock
the_peacock

Reputation: 399

Vue2 & vee-validate - mapFields (nameFlags.valid property or method not found)

trying to learn view and use vee validate package with it.

I am trying to copy this example: http://vee-validate.logaretm.com/examples.html#flags-example but having an issue getting the mapFields to work. My code looks like this;

import {mapFields} from 'vee-validate';

var app = new Vue({

    template: `    
        <div class="simple-root">
            <div :class="{'form-group': true, 'has-warning': email.invalid }">
            <label class="control-label col-sm-2">Email</label>
            <div class="col-sm-10">
                <input v-validate="'required|email'" v-model="email" :class="{'form-control': true}" name="email"
               type="text" placeholder="Email">
                <span v-show="errors.has('email')" class="help has-warning">{{ errors.first('email') }}</span>
            </div>
        </div>
        <div :class="{'form-group': true, 'has-warning': name.invalid, 'has-success': nameFlags.valid}">
            <label class="control-label col-sm-2">Name</label>
            <div class="col-sm-10">
                <input v-validate="'required'" v-model="name" :class="{'form-control': true }" name="name"
               type="text" placeholder="Name">
                <span v-show="name.invalid" class="help has-warning">{{errors.first('name') }}</span>
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary" :disabled="!formDirty">Download
            </button>
        </div>
    </div>`,

    data: () => ({
        email: '',
        name: '',
        }),

    computed: {
        mapFields: ({
            nameFlags: 'name',
            emailFlags: 'email',
        }),
        formDirty() {
             // are some fields dirty?
            return Object.keys(this.fields).some(key => this.fields[key].dirty);
        },
    }
}).$mount("#app");

...but keep getting nameFlags.valid property or method not found.

I guess I am doing something wrong in terms of the declaration, but not sure what.

Any pointers?

thanks

Upvotes: 0

Views: 711

Answers (1)

snovakovic
snovakovic

Reputation: 314

In your example you are not using mapFields helpers from vee-validate. You are creating mapFields property inside computed object which is also not valid as computed properties need to be methods same as formDirty() from your example not plain objects as mapFields.

You first need to import vee-validate helper in order to use it

import { mapFields } from 'vee-validate'

then you should be able to use it as 

    computed: {
      mapped: mapFields({
        nameFlags: 'name',
        emailFlags: 'email',
     }),
     formDirty() {
        // implementation
     }
    }

Upvotes: 3

Related Questions