解决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 相关文章推荐
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
js实现图片实时时钟
Jan 15 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
PHP5 面向对象程序设计
2008/02/13 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
destoon复制新模块的方法
2014/06/21 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
js常用代码段收集
2011/10/28 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python基础教程之元组操作使用详解
2014/03/25 Python
简单易懂的python环境安装教程
2017/07/13 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
用python实现刷点击率的示例代码
2019/02/21 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python实现代码统计程序
2019/09/19 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
秸秆管理实施方案
2014/03/15 职场文书
消防安全宣传标语
2014/06/07 职场文书
公益广告标语
2014/06/19 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python