Javascript/vue.js 接收json

Question

我正在尝试在我的 vue.js 应用程序中接收 json，如下所示：

   new Vue({
            el: 'body',
            data:{
                role: '',
                company: '',
                list:[],
                created: function() {
                  this.getJson();
                },
                methods: {
                    getJson: function(){
                        $.getJSON('http://domain.dev/data',function(task){
                          this.list = task;
                        }.bind(this));
                    }
                }
            }
        });

但结果为空？当我在邮递员中测试这个时，url 返回 json。我在这里做错了什么？

编辑：

JSON（测试数据）：

 {"EmployeeId":1,"RoleId":5,"DepartmentId":6,"InternId":1,"FirstName":"Zoe","LastName":"Altenwerth","Bio":"Quidem perferendis.","email":"[e-mail]","LinkedIn":"[e-mail]","Gender":0,"password":"$2y$10$bbUlDh2060RBRVHSPHoQSu05ykfkw2hGQa8ZO8nmZLFFa3Emy18gK","PlainPassword":"gr^S=Z","remember_token":"D528C0Ba1Xzq3yRV7FdNvDd8SYbrM0gAJdFUcOBq4sNEJdHEOb2xIQ0geVhZ","Address":"0593 Dallin Parkway Apt. 499\nBotsfordborough, MT 12501","Zip":"21503-","City":"East Janiston","ProfilePicture":null,"BirthDate":"2002-10-13 00:00:00","StartDate":"1995-11-09 21:42:22","EndDate":"2011-01-27","Suspended":0,"created_at":"2016-02-29 12:21:42","updated_at":"2016-03-02 11:53:58","deleted_at":null,"role":{"RoleId":5,"RoleName":"Superadministrator","Description":"Mag administrators toevoegen en bewerken","deleted_at":null,"created_at":"-0001-11-30 00:00:00","updated_at":"-0001-11-30 00:00:00"},"department":{"DepartmentId":6,"CompanyId":12,"DepartmentName":"com","Description":"Accusantium quae.","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41","company":{"CompanyId":12,"CompanyName":"Dare, Bailey and Bednar","Logo":null,"Address":"85762 Tabitha Lights\nWest Jettie, AK 20878-2569","Zip":"29601","City":"Traceside","KvKNumber":"84c70661-9","EcaboNumber":"fdee61e3-a22d-3332-a","deleted_at":null,"created_at":"2016-02-29 12:21:41","updated_at":"2016-02-29 12:21:41"}}}

原文由 Jamie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您也必须将 this 绑定到外部函数。

 getJson: function () { ...}.bind(this)

原文由 Lars Graubner 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个如何将外部 JSON 数据加载到组件中的小示例：

一个.json：

 {"hello": "welcome"}

索引.html：

 <div id="app">
    <pre>{{ json.hello }}</pre>
</div>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        json: null
    }
});
$.getJSON('http://localhost/a.json', function (json) {
    app.json = json;
});
</script>

--- 已编辑 —

或者使用 created 事件：

 <script type="text/javascript">
new Vue({
    el: '#app',
    data: {
        json: null
    },
    created: function () {
        var _this = this;
        $.getJSON('http://localhost/a.json', function (json) {
            _this.json = json;
        });
    }
});
</script>

原文由 vbarbarosh 发布，翻译遵循 CC BY-SA 3.0 许可协议