Vee-validate: Use of undefined constant errors - assumed 'errors'

[pavelkabanov]

Hi.

I want to add vee-validate to my Laravel project, but I receive an error: "Use of undefined constant errors - assumed 'errors' "

code:

<div id="app">
    <form class="pure-form pure-form-stacked">
        <div class="pure-u-1">
            <label :class="{'error': errors.has('email') }" for="email">Email</label>
            <input v-validate data-rules="required|email" :class="{'pure-input-1': true, 'has-error': errors.has('email') }" name="email" type="text" placeholder="Email">
            <span class="error" v-show="errors.has('email')">{{ errors.first('email') }}</span>
        </div>
    </form>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.12/vee-validate.min.js"></script>
<script>
        Vue.use(VeeValidate);

        new Vue({
            el: '#app'
        });
</script>

So, I removed this line <span class="error" v-show="errors.has('email')">{{ errors.first('email') }}</span>, there is no errors, but validation not working...

[BrandonSurowiec]

Need to escape the blade command with the @ symbol so it comes through for Vue:

<span class="error" v-show="errors.has('email')">@{{ errors.first('email') }}</span>

[logaretm]

Like @BrandonSurowiec said, this issue isn't related to the plugin, it is related to Vue and Blade sharing the same binding syntax with the {{ }}, luckily blade offers a way to escape them so they are ignored when rendering the view in blade. and Vue gets to pick them up on the client side.