Question

我开始使用VueJS并且必须说它工作得很好，虽然尝试Vue-Resource实现，但只能工作一半。

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

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

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

[{city：“New York”，金额：8}，{city：“旧金山”，金额：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

仅在laravel刀片中需要@ @{{ data }}符号。

是的，您只需要循环显示数据以显示其中的每个人

这是一份工作样本。

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

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

2 个答案: