无法使用Vuejs呈现值，但控制台日志工作正常

Question

我开始使用VueJS并且必须说它的工作方式非常棒，尽管尝试使用Vue-Resource实现，但它只能工作一半。

从我的服务器拉数据时，它似乎不会最终确定数据。

一个例子是下面的代码，其中我从我的服务器加载了一个请求，但它只会加载一半的数据。

我试图插入解析器的响应看起来像这样。

[{城市： “纽约”，数量：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); 
      } 
     ); 
    }, 
} 

}）;

Answer 1

它不是模板，但在这里你走了，我已经尝试过使用静态数据。

这里是模板：

<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> 

Answer 2

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

，是的，你只需要遍历数据，以显示它的每个人都

这里的工作示例。

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