通过vue-router的data获取数据,在页面上显示,每次都提示:
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "user.city.name": TypeError: Cannot read property 'name' of undefined
但页面却能正确显示name, 控制台提示name undefined,我输出日志看应该是先渲染了页面,然后才获取到了值。
但是vue-router的官方文档提到:
data 切换钩子会在 activate 被断定( resolved )以及界面切换之前被调用
那为什么会出现和官方文档描述不一致的顺序?求高手解答。
或者针对这种情况,有没有什么更合适的解决方式?
谢谢!
代码大致如下:
//html代码
<p>{{ user.city.name }}</p>
// JS
export default {
data () {
return {
user: {}
}
},
route: {
data (transition) {
this.$http.post('url', {params}).then((response) => {
let data = JSON.parse(response.body)
this.user = data
})
}
},
}
修改为应该就可以
data () {
return {
user: {
city:{}
}
}
}
兄弟,这不是route的问题。
看错误提示,是user.city值为undefined导致报错的,在ajax完成之前的情况你应该非常清楚,因此需要在初始化data时,设置city属性为对象
嗯。我看文档里面data钩子函数都是通过transition.next(data)进行的。。。
个人猜测是如果钩子函数有调用transition.next时,会等待transition.next。之后再渲染。
而题主代码里面是直接赋值,可能就直接运行完路由,然后你获取到值了,再赋值。没有一个等待的过程。。。
题主不妨试试transition.next({user: data})