CODEWITHSUNDEEP
vue.js
ger
ger

Reputation: 17

Getting vue typeerror cannot read property 'name' of undefined

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`
    })

Upvotes: 1

Views: 978

Answers (1)

Justin Ho Tuan Duong
Justin Ho Tuan Duong

Reputation: 606

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';

Upvotes: 1

Related Questions