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

Question

在学习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: {}
    }
}

报错信息：

Answer 1

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

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

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

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

Answer 2

js的代码贴出来看看

Answer 3

"title" of undefined
是this.selectTopic.node = this.selectNode?

Answer 4

因为获取服务器是异步的，所以 vue 先绑定数据。绑定数据时，你的 selectTopic 赋值为空对象的话，而selectTopic里面的 node 属性为 undefined，所以报"cannot read property 'title' of undefined"。
所以在初始化时，node 属性赋值为空对象就行了。

export default {
    data() {
        return {
            selectTopic: {
                node: {}
            }
        }
    }
}

Answer 5

您好，我在和您实现同样的功能，以下是我的代码，
mounted() {

    this.initList()

},
methods:{

    initList: function(){
        this.$http.post('/api/user/SelectTitle',{},{}).then((response) => {
            this.service_show_list = response.body;
        })
    }

},

但是会报错显示Error in mounted hook: "TypeError: Cannot read property 'post' of undefined"，但是如果通过按钮直接调用initList函数就是没有问题的，麻烦问一下您知道这是怎么回事儿吗~我在main.js中引用了vue-resource的

import VueResource from 'vue-resource'

Vue.config.productionTip = false

new Vue({
el: '#app',
template: '<App/>',
components: { App }
})

Vue.use(VueResource)