浅谈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获取复选框被选中的值
Mar 22 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
vue实现分页组件
Jun 16 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 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 判断字符串中是否包含html标签
2014/02/17 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
js快速排序的实现代码
2013/12/08 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
分享python数据统计的一些小技巧
2016/07/21 Python
python中实现k-means聚类算法详解
2017/11/11 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python的faker库用法
2019/11/28 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
老师给学生的表扬信
2014/01/17 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
初中英语教学随笔
2015/08/15 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
python游戏开发之pygame实现接球小游戏
2022/04/22 Python