vue2 问题: Cannot read property 'xxxx' of undefined

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2584 天前的主题，其中的信息可能已经有所发展或是发生改变。

{{ lists.link.BueKey.name }}

能正确打印出想要的结果

console 打印信息也能正确显示:

console.log('BueKey：');
console.log(this.lists.link.BueKey);

对于错误提示翻了下官方文档也没找到合适答案。新手请指教。

6 条回复 • 2017-10-31 10:36:30 +08:00

airyland

2017-10-31 09:52:20 +08:00

初始化时 lists 是个空 object 吧。。另外问代码问题不帖完整代码不是个好习惯。

fe619742721

2017-10-31 09:58:35 +08:00

同楼上，猜测是模板初始化的时候 lists.link 没有被赋值，在{{}}前面加个 v-if=lists.link 吧，没有代码不是很好判断

anviod

2017-10-31 10:19:24 +08:00

@airyland
@fe619742721

anviod

2017-10-31 10:19:46 +08:00

~~
var token=localStorage.getItem("token");
var taskAll = new Vue({
el: '#taskAll',
data: function () {
return {
lists:[]
}
} ,
methods:{
getHref:function(){
return '/api'+this.lists['path']
},
getScore:function(val){
return val/20
},
getdate:function(val){
axios.get('/api/common/taskAll', {
params: {
'token': token,
'taskInstanceId':1
}
})
.then(function (response) {
taskAll.lists = response.data.object;
console.log('BueKey：');
console.log(taskAll.lists.link.BueKey.name);
})
.catch(function (error) {
console.log(error);
});

}
},
mounted:function(){
this.$nextTick(function () {
taskAll.getdate(1)
})

}
});

fe619742721

2017-10-31 10:29:41 +08:00

就是异步了啊，你的模板里直接引用了 lists.link 这个属性，在初始化的时候模板会被编译计算一次，这个时候 lists.link 还存在，所以没找到报错了。

在双插值引用前加一个条件判断 v-if=lists.link 来避免异步问题

anviod

2017-10-31 10:36:30 +08:00

@fe619742721 好的谢谢咯