浅谈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 相关文章推荐
js 单引号 传递方法
Jun 22 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
小程序实现发表评论功能
2018/07/06 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Django REST framwork的权限验证实例
2020/04/02 Python
如何提高python 中for循环的效率
2020/04/15 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
医学护理系毕业生求职信
2013/10/01 职场文书
自荐信包含哪些内容
2013/10/30 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
国际贸易系求职信
2014/08/09 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
技能培训通讯稿
2015/07/18 职场文书
放假通知怎么写
2015/08/18 职场文书