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

HI,

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;

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

agm1984

7 years ago

Level 1

You can use the mapFields helper like this:

<template>
    <div>
        <input v-model="inputs.name" name="name" v-validate="'required'">
        <span v-show="name.touched && errors.first('name')">{{ errors.first('name') }}</span>

        <input v-model="inputs.email" name="email" v-validate="'required'">
        <span v-show="email.touched && errors.first('email')">{{ errors.first('email') }}</span>
    </div>
</template>

<script>
import { mapFields } from 'vee-validate';

export default {
    data() {
        return {
            inputs: {
                name: '',
                email: '',
            },
        };
    },

    computed: {
        ...mapFields(['name', 'email']),
    },

    mounted() {
        console.log('fancy data', this.name, this.email);
        console.log('bonus fancy data', this.fields, this.errors);
    },
};
</script>

Then you will have this.name and this.email available, and you can use this.name.touched.

Please or to participate in this conversation.