浅谈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 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
小程序自定义日历效果
Dec 29 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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设计模式 Observer(观察者模式)
2011/06/26 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
python基础之入门必看操作
2017/07/26 Python
HTML的form表单和django的form表单
2019/07/25 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python 多进程原理及实现
2020/12/21 Python
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
机械专业应届生求职信
2013/12/12 职场文书
学生自我评价范文
2014/02/02 职场文书
股权投资意向书
2014/04/01 职场文书
党建目标管理责任书
2014/07/25 职场文书
校园运动会广播稿
2014/10/06 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
中秋节感想
2015/08/10 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python