浅谈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 for与each性能比较分析
May 14 Javascript
js实现日期级联效果
Jan 23 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
详解如何较好的使用js
Dec 16 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 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实现读取一个1G的文件大小
2013/08/24 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
个人简历的自荐信
2013/10/23 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
上课说话检讨书大全
2014/01/22 职场文书
担保书范文
2015/01/20 职场文书
工程部岗位职责范本
2015/04/11 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
Python序列化模块JSON与Pickle
2022/06/05 Python