Getting vue typeerror cannot read property 'name' of undefined

Question

I know this type of questions are every where, but I am having problem to find a good answer(I am new to VueJS).I am sorry about that.

I am trying to pass data using vform.

What I am trying to do is adding user details through vform to a table.

Here is my Users.vue code

<div class="modal fade" id="addNew" tabindex="-1" role="dialog" aria-labelledby="addNew" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add New</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body">
              <div class="form-group">
              <input v-model="form.name" type="text" name="name"
              class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
              <has-error :form="form" field="name"></has-error>
             </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>

        </div>
      </div>
    </div> 

<script>
    export default {
    data(){

        return{

            form: new Form({
                name: ''

            })
        }
    },  
 }
</script>

Here is my app.js

 require('./bootstrap');

    window.Vue = require('vue');

    import { Form, HasError, AlertError } from 'vform';

    window.form = Form;

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

    import VueRouter from 'vue-router'
    Vue.use(VueRouter)

    let routes = [
      { path: '/dashboard', component: require('./components/Dashboard.vue') },
      { path: '/profile', component: require('./components/Profile.vue') },
      { path: '/users', component: require('./components/Users.vue') }
    ]

    const router = new VueRouter({
      mode: 'history',
      routes // short for `routes: routes`
    })

Justin Ho Tuan Duong · Accepted Answer · 2019-05-29 03:23:57Z

1

The issue you have is most likely on the line with this:

<input v-model="form.name" type="text" name="name"

You can see it's the only place where .name is called. Which means your form object is undefined and the code is trying to call the attribute name on it which throws you an error.

If you look at the vform README, you will see that the import statement is actually inside the component. The issue with your code is that the import inside app.js doesn't magically appear inside your component so you cannot do new Form() in the Vue component. While you do assign it to the window object in app.js, you don't re-use it later on and IMO, it's better to import your dependencies explicitly.

So in conclusion, what you need to do is: Add this import statement right after the opening <script> tag in your Vue component

import { Form } from 'vform';

answered May 29, 2019 at 3:23

Justin Ho Tuan Duong

6063 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ger Over a year ago

Justin Ho Tuan Duong Thank you very much for your time and answer.

Collectives™ on Stack Overflow

Getting vue typeerror cannot read property 'name' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related