浅谈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多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python编程开发之日期操作实例分析
2015/11/13 Python
python和ruby,我选谁?
2017/09/13 Python
使用tensorflow实现AlexNet
2017/11/20 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python文件选择对话框的操作方法
2019/06/27 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
什么是唯一索引
2015/07/05 面试题
个人简历自我评价范文
2014/02/04 职场文书
期中考试后的反思
2014/02/08 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
监察建议书格式
2014/05/19 职场文书
道路施工安全责任书
2014/07/24 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
小学四年级学生评语
2014/12/26 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
如何Python使用re模块实现okenizer
2022/04/30 Python