vue+elementUI 动态渲染表格,页面不显示数据的问题

最近使用使用axios请求到后台获取数据,动态渲染到el-table 中,遇到已经获得了数据,但表格里始终没有值显示的问题。找个大半天才找到原因所在,遂记录下来,警醒。。。

由于之前使用的是表格标签里绑定url(<el-table :url="urls.url">...</el-table>),直接通过改变url地址达到获取数据的目的,也就是说请求的数据直接赋值给了表格,没有再通过绑定数据的方法赋值。而这次是通过绑定在vue实例的data中定义的数据来渲染(<el-table :data="menus"><>),通过axios方法中将响应的数据赋值给tableData,达到渲染的效果。

问题就出在这段代码上,图中是我修改之后的代码。最开始我是直接写的 this.menus = result.data;这里这样写的后果就是,data中的menus的值并没有改变,但是此时直接打印又会有值,所以页面不会有数据显示。在 axios方法体中,也就是花括号内,不能直接使用this,而是应该用self 代替。或者是在花括号后面绑上this。 axios.get().then(function(){...}.bind(this));

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容