解决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动态获取当前时间,并写到特定的区域
May 03 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
vue el-table实现行内编辑功能
Dec 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
Javascript window对象详解
2014/11/12 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
2017/02/02 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python实现登陆文件验证方法
2018/10/06 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Python decimal模块使用方法详解
2020/06/08 Python
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
行政专员岗位职责
2014/01/02 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
精彩的英文自荐信
2014/01/30 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
家长会学生演讲稿
2014/04/26 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
2014年市场部工作总结
2014/11/25 职场文书
英文辞职信范文
2015/05/13 职场文书
重温入党誓词主持词
2015/06/29 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android