解决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 相关文章推荐
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
js中传递特殊字符(+,&)的方法
Jan 16 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
详解python的几种标准输出重定向方式
2016/08/15 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
对pandas处理json数据的方法详解
2019/02/08 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python I/O与进程的详细讲解
2019/03/08 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python如何求100以内的素数
2020/05/27 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
上课迟到检讨书100字
2014/01/11 职场文书
工程质量承诺书范文
2014/03/27 职场文书
节约用水演讲稿
2014/05/21 职场文书
面试自我评价范文
2014/09/17 职场文书
个人自我剖析材料
2014/09/30 职场文书
新生开学寄语大全
2015/05/28 职场文书
植物园观后感
2015/06/11 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书