javascript - vue的element ui里无法使用ajax?
本文介绍了javascript - vue的element ui里无法使用ajax?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
试图在element ui里的table组件里使用ajax动态加载数据使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="customerId"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="companyName"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="phone"
label="地址">
</el-table-column>
</el-table>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
tableData: [],
getUrl: 'http://211.149.193.19:8080/api/customers',
},
created: function(){
this.getTableData()
},
methods:{
getTableData:function(){
var that = this;
that.$http({
method:'GET',
url:this.getUrl
}).then(function(response){
this.tableData = response;
},function(error){
console.log(error)
})
}
}
})
</script>
</html>
参考的是没有用elementui的ajax,求大神给给建议,这样写可以吗?需要学习cli和webpack吗?我是后端兼职前端。
解决方案
vue-resource
会将你的response
进行包装,
所以你真正需要的数据应该是在response.data
中
这篇关于javascript - vue的element ui里无法使用ajax?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文