最近使用使用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));