浅谈vue获得后台数据无法显示到table上面的坑


Posted in Javascript onAugust 13, 2020

因为刚学vue然后自己自习了一下axios,然后想写一个简单的查询后台数据

<tr v-for=" user in uList">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.gender}}</td>
        </td>
</tr>

然后先是写了这样一个代码

created: function () {    
      axios.get("http://localhost:8080/student/findAll").then(function (response) {
       this.uList = response.data;
        console.log(uList);
      }).catch(function (reason) {
 
      })
    }

然后后台可以获取到数据,但是无法显示到table上面

发现this.uList虽然改变的数据但是数据无法显示到table上面

然后发现这里的this不是外部的this对象,然后进行了更改,数据就回显了

new Vue({
    el:'#app',
    data:{
      uList:[],
    },
    created: function () {
      var arr = this;
      axios.get("http://localhost:8080/student/findAll").then(function (response) {
        arr.uList = response.data;
        console.log(uList);
      }).catch(function (reason) {
 
      })
    }
})

补充知识:vue data有值,但是页面{{}} 取不到值

我的问题出在js引入的顺序不对,导致不能正常显示vue中的值

正确的顺序应该是:

先引入vue的js--------html代码-----最后引入自己写的js

以上这篇浅谈vue获得后台数据无法显示到table上面的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
js 概率计算(简单版)
Sep 12 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 #Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 #Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 #Javascript
jQuery中event.target和this的区别详解
Aug 13 #jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 #Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 #Javascript
Postman参数化实现过程及原理解析
Aug 13 #Javascript
You might like
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
一些常用的Javascript函数
2006/12/22 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
2016/11/11 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
《自然之道》教学反思
2014/02/11 职场文书
母亲节感恩寄语
2014/02/21 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
优秀班组申报材料
2014/12/25 职场文书
失职检讨书大全
2015/01/26 职场文书
教师工作表现自我评价
2015/03/05 职场文书
会计求职自荐信
2015/03/26 职场文书
项目验收申请报告
2015/05/15 职场文书