Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新

问题：

用ajax或者axios，get数据是正常的。但是渲染数据时data一直为空

问题代码：

下面代码看起来是正常的，但是当运行的时候会报错：这时候你运行时会发现，数据可以请求到，但是会报错TypeError: Cannot set property ‘dataList’ of undefined

data () {return {dataList:[],}
},
mounted(){this.getDataList()
},
methods:{getDataList(){//用axios获取数据axios({method:'get',url:'/api/info'}).then(function(response){console.log(response.data)this.listClass = response.data}).catch(function(error){ // 请求失败处理console.log(error);});//用ajax获取数据$.ajax({url: '/api/devices',method: 'GET',dataType: 'JSON',async:false,success: function(data) {that.listClass = data}})}
}

主要原因是：

在ajax中的this会指向ajax本身，而不再是vue实例本身，同理，axios的then中this也不是指向vue实例本身

解决办法：

方法1： 用ES6箭头函数，箭头方法可以和父方法共享变量 ( ES6中的箭头函数 “=>” 内部的this是词法作用域，由上下文确定(也就是由外层调用者vue来确定) )

axios({method:'get',url:'/api/info'}).then((response) => {console.log(response.data)that.listClass = response.data}).catch((error) => { // 请求失败处理console.log(error);});

方法2： 在请求axios外面定义一下 var that=this

//用axios获取数据var that = thisaxios({method:'get',url:'/api/info'}).then(function(response){console.log(response.data)that.listClass = response.data}).catch(function(error){ // 请求失败处理console.log(error);});

拓展：

vue项目怎么引入全局的axios?

下载：

npm install axios --save

引入:

import axios from "axios"
Vue.prototype.$axios = axios

使用：

this.$axios({url: "api/login",method: "post"
})

Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新相关推荐

vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
vue 后台数据列表获取图片_vue使用ajax获取后台数据进行显示的示例
实例如下所示: title #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } 添加数据编号名称时间 ...
vue 读取ajax数据,详解vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...
(vue)在ajax获取数据时使用loading组件不起作用
问题描述: 在用ajax获取数据时页面没有变化,想用一个loading图标在获取数据时显示,获取完成后隐藏整个系统用到了vue框架,在执行sure方法时调用ajax函数 sure() {conso ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
vue使用ajax提交数据,vue使用ajax请求后台数据的方法
vue使用ajax请求后台数据的方法发布时间:2020-10-15 16:54:41 来源:亿速云阅读:108 作者:栢白这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ...
vusjs 配合php_对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据
上篇文章介绍了vue.js如何ajax获取数据: 接着不可避免就遇到的是: 如何进行数据分页呢? 这里以thinkphp为示例讲解:其他场景性质一样: 示例项目:https://github.com/ ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
json模拟数据怎么用_在使用axios获取自己模拟的json数据是踩到的坑
最近在使用Vue仿写一个网易云音乐的单页面应用,当页面布局什么的写完后,然后就准备用axios获取后台数据渲染页面了,当然,我自己写的,并没有后台,所以,我就自己写json文件,然后弄proxy代理什 ...

Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新

vue项目怎么引入全局的axios?

Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新相关推荐

最新文章

热门文章