如何解决页面上未定义的数据错误重新加载Nuxt.js
我目前正在使用Nuxt.js开发通用应用程序,大部分页面上的数据都是使用fetch挂钩和vuex存储库从API检索的。我开始注意到页面重新加载/刷新时出现错误,有时当我从导航栏访问页面时出现错误。页面错误是:
TypeError: Cannot read property 'data' of undefined
其中数据是从API检索的对象。我在互联网上搜索了此内容,发现它与未完全加载数据或未加载数据或页面呈现有关。我通过在模板上使用v-if来检查数据是否已设置,然后显示内容,从而找到了解决方法。我的问题是,是否有办法实现这一目标,我尝试使用async / await关键字,但这无济于事,我觉得v-if方法不是处理此问题的最佳方法。
编辑:使用fetch()时使用$ fetchState.pending解决
解决方法
如果在模板中立即显示从API检索到的数据,那么确实使用v-if是正确的方法。
如果您正在使用新的fetch()
挂钩,则可以在模板中使用$fetchState.pending
检查加载是否完成,例如:
<div v-if="$fetchState.pending">
<p> Content is loading... </p>
</div>
<div v-else>
<p> Content has loaded! {{data}}</p>
</div>
<script>
export default{
data(){
return{
data: null
}
}
async fetch(){
this.data = await getSomeAPI
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。