详解Vue-Cli 异步加载数据的一些注意点
更新时间：2017年08月12日 16:44:35 作者：Evgni0n
本篇文章主要介绍了详解Vue-Cli 异步加载数据的一些注意点，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
刚开始学vue的时候没有使用脚手架，现在用脚手架写法有点不同，今天遇到的问题是使用豆瓣api异步加载数据的时候，会一直在命令行上报错，基本上错误都是xxx 未定义。
例子
<template>
<div v-if="moviesData">
<!-- 正在上映的电影-北京 -->
<h1>{{ moviesData.title }}</h1>
</div>
</template>
<script>
import jsonp from 'jsonp' // 一个jsonp插件 npm install jsonp --save
export default {
data(){
return {
moviesData: null // 如果不事先给一个默认值的data，就会报 xxx is not define
}
},
// 生命周期函数
created(){
// 发送请求
jsonp('https://api.douban.com/v2/movie/in_theaters', null, (err, data)=>{
this.moviesData = data;
});
}
}
</script>
在发送异步请求的时候要注意两个点：
数据的初始值，我这里是给null作为初始值。
判断数据是否存在，在html中，我用v-if判断moviesData是否存在，可以确保只有在数据存在的时候才会渲染。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中$attrs与$listeners的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框
最近遇到了个需求是使用element-ui插件编写页面,点击按钮,弹出对话框,这篇文章主要给大家介绍了关于Vue中使用element-ui给按钮绑定一个单击事件实现点击按钮就弹出dialog对话框的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue中的计算属性和axios基本使用回顾，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了详解Vue.js iview实现树形权限表（可扩展表），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题
这篇文章主要介绍了vue解决this.$refs.xx在mounted中获取DOM元素为undefined问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要为大家详细介绍了vue实现web前端登录页数字验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
本文主要介绍了Vue实现模糊查询搜索功能的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
本篇文章主要介绍了vue动态生成dom并且自动绑定事件，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
这篇文章主要介绍了vue组件之间相互传值的方式，对vue感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了vue打包后,用后端接口报错304、404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论