浅谈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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
Javascript缓存API
Jun 14 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
JS计算斐波拉切代码实例
Sep 12 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之Memcache学习笔记
2013/06/17 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python语言生成水仙花数代码示例
2017/12/18 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
解析Python3中的Import
2019/10/13 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
哈理工毕业生的求职信
2013/12/22 职场文书
甜点店创业计划书
2014/01/27 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
会计求职信
2014/05/29 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
医院病假条怎么写
2015/08/17 职场文书
幼儿园大班教师评语
2019/06/21 职场文书