解决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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
canvas的神奇用法
Feb 03 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
Vue编程式跳转的实例代码详解
Jul 10 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使用递归生成文章树
2015/04/21 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
简单实现php上传文件功能
2017/09/21 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
用Python读取几十万行文本数据
2018/12/24 Python
python Django的web开发实例(入门)
2019/07/31 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书
党支部三会一课计划
2014/09/24 职场文书
综合管理员岗位职责
2015/02/11 职场文书
通讯稿格式及范文
2015/07/22 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫