vue报错TypeError: Cannot read property ‘Name‘ of undefined的解决方案

最新推荐文章于 2025-05-16 15:17:30 发布

Misnice

最新推荐文章于 2025-05-16 15:17:30 发布

阅读量2.4w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js js vue报错 vue报错TypeError

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/107496156

Vue 专栏收录该内容

47 篇文章

订阅专栏

本文详细解析了在Vue.js中使用双花括号进行数据绑定时遇到的TypeError问题，即'cannot read property of undefined'错误，并提供了正确的初始化方法来避免此类错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题描述

使用{{}}双花括号在html页面进行数据绑定时，从一个对象中获取，超过两个.就报错，如下代码报错提示为

“TypeError: Cannot read property ‘Name’ of undefined”。

var editsmall_v = new Vue({
    el: '#editsmall',
    data: {
        editSmall : {}
    },
    methods: {

    }
});

<div class="form-section">
    <label class="required label">{{editSmall.lang.Name}}</label>
</div>

二、问题解决

因为获取服务器是异步的，所以 vue 先绑定数据。绑定数据时，你的lang赋值为空对象的话，而lang里面的 name 属性便为 undefined，所以报"cannot read property ‘name’ of undefined"。

所以在初始化时，node 属性赋值为空对象就行了。

var editsmall_v = new Vue({
    el: '#editsmall',
    data: {
        editSmall : {
            lang : {},
            resumeInfo : {
                personInfo : {},
                TargetJob : {},
                SelfAssessment : {},
            }
        },
        salarytype : '',
        salaryname :''
    },
    methods: {
    }

});