vue.js - vue 中通过 ajax 获取数据时，如何避免绑定的数据中出现 property of undefined 错误

问题描述

问 题

在学习vue过程中遇到一个比较迷的问题。。

就是：我在使用{{}}双花括号进行数据绑定时，从一个对象中获取，超过两个.就报错

代码：

这样时正确的。

<span class="crumbs-item">{{selectNode.title}}</span>
this.selectNode = this.selectTopic.node;    // 存了一次

这样就报错。

<span class="crumbs-item">{{selectTopic.node.title}}</span>

js：

mounted() {
    let id = this.$route.params.id;
    this.selectTopic = {};
    this.$http.get('/api/topics/show.json', {
        headers: {},
        params: {
            id: id
        },
        emulateJSON: true
    }).then((response) => {
        if (response.status === successNum) {
            this.selectTopic = response.data[0];
            this.selectNode = this.selectTopic.node;
            this.selectMember = this.selectTopic.member;
        }
    }, (response) => {
        console.log(response)
    })
}

获取到的json：

selectTopic:Object
replies:0
id:338465
created:1486366045
content:"坐标在广州<->深圳...两个城市的都可以。\r\n\r\n还是一名大学狗大三...学的是计算机做的是前端，最近啃书中，有 dalao 带就更好了。\r\n\r\n兴趣爱好 看书 听歌 看电影，一个人看电影居多...一来没什么伴，二来想认真看完之后在讨论，太多人喜欢讲话了...\r\n最近在学游泳，欢迎 dalao 脚把脚教学， hhhh 逛知乎豆瓣微博...\r\n\r\n毕业可能会留广州 或者 深圳 刚开始没办法飞太远...\r\n\r\n数据的话是:173 裸足高， 55 ， 95 ，属性还没办法定义哈只做过 0 。觉得两个男生，互相有欲望也很正常吧，互相满足吧互相照顾吧， 134 ， 246 这样轮流来哈 hhhhh 。\r\n\r\n希望能有一个一直走下去吧，相信爱情。\r\n\r\n长相的话长的 babyface...长得和年龄有差。长相<真实年龄<心理年龄。\r\n\r\n悄悄地留个扣扣:壹伍壹玖叁陆肆陆伍零"
content_rendered:"坐标在广州&lt;-&gt;深圳...两个城市的都可以。\r<br />\r<br />还是一名大学狗大三...学的是计算机做的是前端，最近啃书中，有 dalao 带就更好了。\r<br />\r<br />兴趣爱好 看书 听歌 看电影，一个人看电影居多...一来没什么伴，二来想认真看完之后在讨论，太多人喜欢讲话了...\r<br />最近在学游泳，欢迎 dalao 脚把脚教学， hhhh 逛知乎豆瓣微博...\r<br />\r<br />毕业可能会留广州 或者 深圳 刚开始没办法飞太远...\r<br />\r<br />数据的话是:173 裸足高， 55 ， 95 ，属性还没办法定义哈只做过 0 。觉得两个男生，互相有欲望也很正常吧，互相满足吧互相照顾吧， 134 ， 246 这样轮流来哈 hhhhh 。\r<br />\r<br />希望能有一个一直走下去吧，相信爱情。\r<br />\r<br />长相的话长的 babyface...长得和年龄有差。长相&lt;真实年龄&lt;心理年龄。\r<br />\r<br />悄悄地留个扣扣:壹伍壹玖叁陆肆陆伍零"
last_modified:1486366045
last_touched:1486351645
member:Object
    avatar_large:"//v2ex.assets.uxengine.net/avatar/1720/a670/211065_large.png?m=1484573232"
    avatar_mini:"//v2ex.assets.uxengine.net/avatar/1720/a670/211065_mini.png?m=1484573232"
    avatar_normal:"//v2ex.assets.uxengine.net/avatar/1720/a670/211065_normal.png?m=1484573232"
id:211065
tagline:""
username:"ArcherDog"
node:Object
    avatar_large:"/static/img/node_large.png"
    avatar_mini:"/static/img/node_mini.png"
    avatar_normal:"/static/img/node_normal.png"
    id:233
name:"hishim"
title:"他他"
topics:13
url:"http://www.v2ex.com/go/hishim"
title:"趁 V2EX 人少...悄悄的征个对象 hhhhhh"

data() {
    return {
        selectTopic: {},
        selectNode: {},
        selectMember: {}
    }
}

报错信息：

解决方案

你要首先确保 selectTopic.node 有定义，如果 selectTopic 是通过 ajax 异步获取的，在获取之前，selectTopic.node 是未定义的。此时在外面的 span 上添加一个 v-if="selectTopic.node" 可以避免这样的错误提示。

另一种方法是将 selectTopic 初始化为一个包含 node 属性的对象字面量。

data () {
  return {
    selectTopic: {
      node: null
    }
  }
}

另外，mounted 钩子里进行 ajax 调用之前，没有必要对 selectTopic 进行赋值。

这篇关于vue.js - vue 中通过 ajax 获取数据时，如何避免绑定的数据中出现 property of undefined 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！