的JavaScript/vue.js收到JSON

我想收到JSON在我vue.js的應用程序是這樣的：的JavaScript/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（TESTDATA）：

{"EmployeeId":1,"RoleId":5,"DepartmentId":6,"InternId":1,"FirstName":"Zoe","LastName":"Altenwerth","Bio":"Quidem perferendis.","email":"[email protected]","LinkedIn":"[email protected]","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"}}}

來源

2016-03-03 Jamie

你必須綁定this外部函數了。

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

來源

2016-03-03 11:21:42

是的，我已經嘗試過，但事實並非如此。 – Jamie

任務是否包含任何數據？ –

當我console.log（任務）;它沒有顯示任何東西在控制檯？！（我包括jquery） – Jamie

下面是如何將外部JSON數據加載到您的組件一個小例子：

a.json：

{"hello": "welcome"}

的index.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>

來源

2016-03-03 11:35:29 vbarbarosh

'_this'是什麼意思？爲什麼我們不能使用'this'？ –

@SuatAtanPhD有3種訪問'this'的方法。 1）使用像'_this'這樣的變量; 2）使用箭頭函數'（）=> {...}'; 3）使用bind'function（）{}。bind（this）'。我選擇第一個選項。 – vbarbarosh

大廈@ vbarbarosh的答案，但使用瀏覽器的提取API：

a.json：

{"hello": "welcome"}

的index.html：

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

<script type="text/javascript"> 
new Vue({ 
    el: '#app', 
    data: { 
     json: null 
    }, 
    created: function() { 
     fetch("/a.json") 
     .then(r => r.json()) 
     .then(json => { 
      this.json=json; 
     }); 
    } 
}); 
</script>

來源

2017-06-29 00:11:21 antoine

的JavaScript/vue.js收到JSON

回答

相關問題