Vue 初始化数据报错的解决方案 TypeError: Cannot read property ‘xxx‘ of undefined

最新推荐文章于 2023-04-20 14:26:48 发布

ougexingfuba

最新推荐文章于 2023-04-20 14:26:48 发布

阅读量2.3k

点赞数

分类专栏： html css vue

本文链接：https://blog.csdn.net/ougexingfuba/article/details/110645523

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html css

2 篇文章 0 订阅

订阅专栏

当我们vue项目渲染数据时，有时候页面渲染成功，但是控制台却报错： TypeError: Cannot read property 'xxx' of undefined 。这是因为一开始你渲染的数据还没有赋值成功，解决办法有两种：

1.首先看个例子（下面的html页面渲染时会报错：TypeError: Cannot read property 'firstName' of undefined）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解决数据TypeError的问题</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
    <div id="app">
        <div>{{message.sex}}</div>
        <div>
            <span>{{message.name.firstName}}</span><span>{{message.name.lastName}}</span>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message:""
            },
            methods: {
                test(){
　　　　　　　　　　　　//写不写延时器都一样，这里只是模仿调用axios请求的效果
                    setTimeout(() => {
                        var res={sex:'man',name:{firstName:'one',lastName:'two'}}
                        this.message=res;
                    }, 1000);
                }
            },
            mounted() {
              this.test();
            },
        })
    </script>
</body>
</html>

原因：初始化页面时，message的值为空，在渲染message.name.firstName时name没有值，name.firstName肯定就是undefined了

2.解决方法：

使用 v-if=""，里面填你意淫出来的属性值，比如这里是填 v-if = "message.name"

<div v-if="TechIndex.team" v-html="TechIndex.team.content">

ougexingfuba

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 初始化数据报错的解决方案 TypeError: Cannot read property ‘xxx‘ of undefined

当我们vue项目渲染数据时，有时候页面渲染成功，但是控制台却报错：TypeError: Cannot read property 'xxx' of undefined 。这是因为一开始你渲染的数据还没有赋值成功，解决办法有两种：1.首先看个例子（下面的html页面渲染时会报错：TypeError: Cannot read property 'firstName' of undefined）：<!DOCTYPE html><html lang="en"><head.
复制链接

扫一扫