浅谈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实现模拟页面加载进度条
Apr 01 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 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中设置多级目录session的问题
2011/08/08 PHP
php给图片加文字水印
2015/07/31 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
js实现继承的5种方式
2015/12/01 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
微信小程序日历效果
2018/12/29 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python 字符串换行的多种方式
2018/09/06 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python字符串格式化方式解析
2019/10/19 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
教师校本培训方案
2014/02/26 职场文书
给全校老师的建议书
2014/03/13 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js