解决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 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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 isset()与empty()的使用区别详解
2010/08/29 PHP
Php图像处理类代码分享
2012/01/19 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python中 * 的用法详解
2019/07/10 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
资源工程专业毕业生求职信
2014/02/27 职场文书
环保建议书作文
2014/03/12 职场文书
党支部公开承诺书
2014/03/28 职场文书
综艺节目策划方案
2014/06/13 职场文书
户籍证明模板
2014/09/28 职场文书
二手房购房协议书范本
2014/10/05 职场文书