javascript - vue的element ui里无法使用ajax?

查看:275
本文介绍了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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆