解决vue接口数据赋值给data没有反应的问题


Posted in Javascript onAugust 27, 2018

问题:

就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果)

代码如下:

data() {
 return {
  slides: []
 }
},
mounted() {
 this.request()
},
methods: {
 request() {
  this.$http.post('xxxxxxxxxxxx', {},
   (res) => {
    if (is.object(res)) {
     if (res.status === 'succ') {
      this.slides = res.data.useddevice_list
      console.log(this.slides)
     } else {
      console.log(res)
     }
    } else {
     this.$toast.show('加载失败')
    }
   }, (data) => {
    this.$toast.show('请求数据失败')
   })
 }
}

打印出来也是有数据的(但是组件那边没有效果)等功能

解决vue接口数据赋值给data没有反应的问题

解决方法:

因为他是一个[], 一开始加载的时候你去获取数据肯定是undefined, vue官方说了最好提前把所有属性声明好。不管有没有数据也给他一个null

data() {
 return {
  slides: [null]
 }
},
mounted() {
 this.request()
},
methods: {
 request() {
  this.$http.post('xxxxxxxxx', {},
   (res) => {
    if (is.object(res)) {
     if (res.status === 'succ') {
      this.slides = res.data.useddevice_list
      console.log(this.slides)
     } else {
      console.log(res)
     }
    } else {
     this.$toast.show('加载失败')
    }
   }, (data) => {
    this.$toast.show('请求数据失败')
   })
 }

解决vue接口数据赋值给data没有反应的问题

以上这篇解决vue接口数据赋值给data没有反应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
JavaScript构造函数详解
Dec 27 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 #Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 #Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 #Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 #Javascript
JS常见构造模式实例对比分析
Aug 27 #Javascript
Vue.js图片预览插件使用详解
Aug 27 #Javascript
JavaScript中创建原子的方法总结
Aug 26 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
javascript 数组的方法集合
2008/06/05 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python基于opencv检测程序运行效率
2019/12/28 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
python Selenium 库的使用技巧
2020/10/16 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
自荐信包含哪些内容
2013/10/30 职场文书
成品仓管员工作职责
2013/12/29 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
文明演讲稿范文
2014/05/12 职场文书
春游踏青活动方案
2014/08/14 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
检讨书范文2000字
2015/01/28 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
python实现层次聚类的方法
2021/11/01 Python