解决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 相关文章推荐
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
vue实现单一筛选、删除筛选条件
Oct 26 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小技巧之函数重载
2014/06/02 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
手机端转换rem适应
2017/04/01 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python简易版停车管理系统
2019/08/12 Python
python编写猜数字小游戏
2019/10/06 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
商超业务员岗位职责
2014/03/12 职场文书
我的祖国演讲稿
2014/05/04 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
利用Redis实现点赞功能的示例代码
2022/06/28 Redis