解决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 插件 人性化的消息显示
Jan 21 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 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下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP面向对象精要总结
2014/11/07 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
JS判断数组那点事
2017/10/10 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
python通过socket查询whois的方法
2015/07/18 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python三大神器之fabric使用教程
2019/06/10 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
pytorch进行上采样的种类实例
2020/02/18 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
中科创达面试题
2016/12/28 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
广告学专业自荐信范文
2014/02/24 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
鸡毛信观后感
2015/06/11 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
cypress测试本地web应用
2022/06/01 Javascript
Redis过期数据是否会被立马删除
2022/07/23 Redis