解决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 相关文章推荐
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
Three.js基础学习教程
Nov 16 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
Node 代理访问的实现
Sep 19 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
javascript知识点收藏
2007/02/22 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Python函数的周期性执行实现方法
2016/08/13 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
公司司机岗位职责
2014/02/07 职场文书
2014年司法局工作总结
2014/12/11 职场文书
祝酒词范文
2015/08/12 职场文书
教师教育教学随笔
2015/08/15 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Docker官方工具docker-registry案例演示
2022/04/13 Servers
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js