获取 vue typeerror 无法读取未定义的属性“name”
2019-05-29
966
我知道这种类型的问题随处可见,但是我在寻找一个好的答案时遇到了问题(我是 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">×</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`
})
1个回答
您遇到的问题很可能与此有关:
<input v-model="form.name" type="text" name="name"
您可以看到它是唯一调用
.name
的地方。这意味着您的
form
对象是
undefined
,并且代码正在尝试调用其上的属性
name
,这会引发错误。
如果您查看
vform README
,您将看到
import
语句实际上位于组件内部。您的代码的问题是
app.js
中的导入不会神奇地出现在您的组件内部,因此您无法在 Vue 组件中执行
new Form()
。虽然您确实将其分配给
app.js
中的
window
对象,但您以后不会重新使用它,而且在我看来,最好明确导入您的依赖项。
总而言之,您需要做的是:在您的 Vue 组件中的打开
<script>
标签之后立即添加此导入语句
import { Form } from 'vform';
Justin Ho Tuan Duong
2019-05-29