解决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 相关文章推荐
<script defer> defer 是什么意思
May 10 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
Javascript进制转换实例分析
May 14 Javascript
javascript相关事件的几个概念
May 21 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
json的使用小结
Jun 08 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
vuex实现数据状态持久化
Nov 11 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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 图片上传类代码
2009/07/17 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
php实现读取超大文件的方法
2014/07/28 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
PHP7新特性
2021/03/09 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
Vue2 模板template的四种写法总结
2018/02/23 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python自定义线程类简单示例
2018/03/23 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
python统计中文字符数量的两种方法
2019/01/31 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
三个Unix的命令面试题
2015/04/12 面试题
业务代表的岗位职责
2013/11/16 职场文书
物业管理计划书
2014/01/10 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
小学音乐教学反思
2014/02/05 职场文书
高中生操行评语大全
2014/04/25 职场文书
法制宣传标语集锦
2014/06/25 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书