無法使用Vuejs呈現值，但控制檯日誌工作正常

我開始使用VueJS並且必須說它的工作方式非常棒，儘管嘗試使用Vue-Resource實現，但它只能工作一半。無法使用Vuejs呈現值，但控制檯日誌工作正常

從我的服務器拉數據時，它似乎不會最終確定數據。

一個例子是下面的代碼，其中我從我的服務器加載了一個請求，但它只會加載一半的數據。

我試圖插入解析器的響應看起來像這樣。

[{城市：「紐約」，數量：8}，{城市：「舊金山」，數量：18}]

時，我就記錄到它工作正常，在控制檯的問題是，但渲染消除了金額。從來沒有城市，只有從每個位置的金額。

有人可以告訴我這是怎麼發生的。我只能從Vue.js 0.9中找到解決方案，但我使用的是Vue.js 2.3.3和Vue-resource 1.3.3。

vm = new Vue({ 
el: '#devApp', 
data: { 
    citiesCount: [], 
}, 
mounted: function() 
{ 
    this.getLocationsCityCount(); 
    this.getLatestLocations(); 
}, 
methods: { 
    getLocationsCityCount: function(cb) 
    { 
     var test = this.$http.get('/api/v1/locations/count/cities').then(
      success => { 
       console.log(success.body.response); 
       this.citiesCount = success.body.response; 
      }, 
      error => { 
       console.log('error'); 
       console.log(error); 
      } 
     ); 
    }, 
}

}）;

來源

2017-06-05 user1637209

顯示我使用Laravel模板 –

它不是模板，但在這裏你走了，我已經嘗試過使用靜態數據。

這裏是模板：

<div id="devApp" class="panel panel-default"> 
<div class="panel-heading"> 
    <h4 class="panel-title">Location amount per city</h4> 
</div> 

<ul class="list-group location-list"> 
    <li class="list-group-item" v-for="item in citiesCount">@{{item.city}}<span class="badge">@{{item.amount}}</span></li> 
</ul>

來源

2017-06-05 21:17:34 user1637209

的@符號@{{ data }}只需要在laravel刀片。

，是的，你只需要遍歷數據，以顯示它的每個人都

這裏的工作示例。

https://jsfiddle.net/khenxi/djcner34/

來源

2017-06-06 06:17:25 Kzy

。我認爲問題出在我的瀏覽器上，因爲在其他瀏覽器中以及我重新安裝我的瀏覽器（Google Chrome 59）後，它工作正常。它再次運作？！ – user1637209

你老丁的版本是什麼？自從使用ES6以來，請更好地檢查兼容性。 – Kzy

無法使用Vuejs呈現值，但控制檯日誌工作正常

回答

相關問題