浅谈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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
ionic实现底部分享功能
May 11 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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中Cookie的使用详解(简单易懂)
2017/04/28 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
json数据的列循环示例
2013/09/06 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
求职简历自荐信
2013/10/20 职场文书
迟到检讨书400字
2014/01/13 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
感恩教育主题班会
2015/08/12 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL