浅谈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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
纯JS实现简单的日历
Jun 26 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
BootStrap数据表格实例代码
Sep 13 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php print EOF实现方法
2009/05/21 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
简单了解微信小程序的目录结构
2019/07/01 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
pycham查看程序执行的时间方法
2018/11/29 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
公司拓展活动方案
2014/02/13 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android