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/