[Vuejs]-Vee-validate Basic example not working – errors not defined

by

1👍

You seems to use veevalidate 3 instead of veeValidate 2. I have updated the veevalidate to version 2 in my answer as well as adding v-model="email_primary"

Since you have a template already, I have removed template: '#app',. Kindly see below

<!DOCTYPE html>
<html>

<head>

    <head>

    <body>
        <div id="app">
            <h1>asdfasd</h1>
            <form action='#' method='POST'>
                <input v-model="email_primary" v-validate="'required|email'"
                    :class="{'input': true, 'is-danger': errors.has('email_primary') }"
                    name="email_primary" type="text" placeholder="email_primary">
                <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
                <button class="button is-link" name='submitform' value='go'>Submit</button>
            </form>
        </div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
        <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.15/vee-validate.min.js"></script>
        <script>
            Vue.use(VeeValidate);
            new Vue({
                el: "#app",                
                data() {
                    return {
                        email_primary: null
                    };
                }
            });
        </script>
    </body>
</html>

Here is a working fiddle. I hope my answer will help.

👤muya.dev

Leave a comment