浅谈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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 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
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
js获得参数的getParameter使用示例
2014/02/26 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
Python中标准模块importlib详解
2017/04/16 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python实现远程控制电脑
2019/05/23 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python打印异常信息的两种实现方式
2019/12/24 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
应届毕业生应聘自荐信
2013/12/07 职场文书
化妆品活动策划方案
2014/05/23 职场文书
市场营销工作计划书
2014/09/15 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
企业安全生产规章制度
2015/08/06 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书