TypeError: _vm.formData.errors.has is not a function

[shifoodew]

Good day.

can you help me how to fix the error I encountered? I followed the instruction at vform

I installed the package using: npm i axios vform

dashboard.blade.php

 @section('custom_js')
    <script src="{{ asset('js/vendor/jquery.dataTables.js') }}"></script>
    <script src="{{ asset('js/vendor/dataTables.bootstrap4.js') }}"></script>
    <script src="{{ asset('js/vendor/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/vendor/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('js/membership.js') }}" ></script>
 @endsection

membership.js

window.Vue = require('vue');
window.moment = require('moment');

import VueRouter from 'vue-router';
import MembershipDashboard from '.././components/Member/MembershipDashboard.vue';
import MemberFormComponent from '.././components/Member/MemberFormComponent.vue';

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
             path: '/',  name: 'member' ,component: MembershipDashboard, props: true 
        },
        { 
            path: '/create-member',  name: 'add-member' ,component: MemberFormComponent, props: true,
        }
    ]
});

const app = new Vue({
    router,
    el: '#membership-dashboard',
    components: { MembershipDashboard, MemberFormComponent }
});

MemberFormComponent.vue

<template>
    <div>
        <form id="accountForm" @submit.prevent="submitForm" @keydown="form.onKeydown($event)">
            <div class="col-12 col-md-4">
                <label>First Name<span class="text-danger">*</span></label>
                <div class="form-group">
                    <input type="text" class="form-control text-uppercase" :class="{ 'is-invalid': formData.errors.has('first_name') }" id="first_name" name="first_name" v-model="formData.members_info.first_name">
                    <has-error :form="formData" field="first_name"></has-error>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import Vue from 'vue' // If e remove this, It will cause and error: Vue is not defined
import { Form, HasError, AlertError } from 'vform'

Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

export default {
    created(){
        this.insertDataForExistingUser();
    },
    mounted() {
    },
    data() {
        return {
            formData : new Form({
                members_info:{
                    id: null,
                    first_name: null,
                    middle_name:null,
                }
            }),
        }
    },
    methods:{
        insertDataForExistingUser(){
            let self= this;
            // If ID is not null insert user existing data.
            if (self.formData.members_info.id) {
                console.log('Opps ID is notnull!')
            }
        },
        submitForm(){
            // Submit the form via a POST request
            this.formData.post('/membersv2/member/create')
                .then(({ data }) => { console.log(data) })
        }
    },
}
</script>

Error TypeError: _vm.formData.errors.has is not a function

[Snakzi]

Hello, have you ever solved this issue?

[Remo]

I've got the same problem. It seems like it works when developing, but in production with SSR enabled I'm getting this error. Any hint would be appreciated.