解决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 AJAX提交中文乱码的解决方案
Jul 02 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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调用Twitter的RSS的实现代码
2010/03/10 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
使用python实现BLAST
2018/02/12 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
基于python的列表list和集合set操作
2019/11/24 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
信息技术专业个人自我评价
2013/12/11 职场文书
少先队入队活动方案
2014/02/08 职场文书
5s推行计划书
2014/05/06 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
Java完整实现记事本代码
2022/06/16 Java/Android