时间戳

首页 > 解决方案 > 获取 vue typeerror 无法读取未定义的属性“名称”

vue.js - 获取 vue typeerror 无法读取未定义的属性“名称”

问题描述

我知道这种类型的问题无处不在，但是我很难找到一个好的答案（我是 VueJS 的新手）。对此我很抱歉。

我正在尝试使用 vform 传递数据。

我想做的是通过 vform 将用户详细信息添加到表中。

这是我的 Users.vue 代码

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

这是我的 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`
    })

标签： vue.js

解决方案

您遇到的问题很可能与此有关：

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

你可以看到它是唯一.name被调用的地方。这意味着您的form对象是undefined并且代码正在尝试调用其上的属性name，这会引发错误。

如果您查看vform README，您会看到该import语句实际上是在组件内部。您的代码的问题是内部的导入app.js不会神奇地出现在您的组件中，因此您无法new Form()在 Vue 组件中执行此操作。虽然您确实将它分配给 中的window对象app.js，但您以后不要重复使用它，IMO，最好显式导入您的依赖项。

所以总而言之，你需要做的是：<script>在你的 Vue 组件的开始标签之后添加这个 import 语句

import { Form } from 'vform';

推荐阅读