解决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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
微信小程序自定义胶囊样式
Dec 27 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编码转换
2012/11/05 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php判断访问IP的方法
2015/06/19 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
js常用代码段整理
2011/11/30 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
浅析vue-router原理
2018/10/19 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python作用域用法实例详解
2016/03/15 Python
python对html过滤处理的方法
2018/10/21 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
会计专业自荐信
2013/12/02 职场文书
青春无悔演讲稿
2014/05/08 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
人民调解协议书范本
2014/10/11 职场文书
自我检讨书范文
2015/01/28 职场文书
无工作证明怎么写
2015/06/15 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS