浅谈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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
node省市区三级数据性能测评实例分析
Nov 06 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
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中利用post传递字符串重定向的实现代码
2011/04/21 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
区三好学生主要事迹
2014/01/30 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
少儿节目主持串词
2014/04/02 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
写得不错的求职信范文
2014/07/11 职场文书
数学教育专业求职信
2014/07/22 职场文书
中秋客户感谢信
2015/01/22 职场文书
送达通知书
2015/04/25 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
党员进社区活动总结
2015/05/07 职场文书
班级管理经验交流材料
2015/11/02 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
MySQL的存储过程和相关函数
2022/04/26 MySQL