vue http get html模板,使用$ http响应填充HTML模板VueJS

我是VueJs的新手，正在开发一款小型营养应用程序。目前，我们想根据一定的营养成分来制作食物。

的JS如下：

recommendFood: function() {

this.recs = {};

var _this = this;

var getItem = function(ndbno,i,nid) {

_this.$http.get('http://127.0.0.1:3000/item?ndbno=' + ndbno).then(function(response) {

var someData = response.body;

var nutrients = someData.report.food.nutrients;

var item = someData.report.food;

item = this.addNutrientsToItem(item, nutrients);

this.recs[nid].push(item);

});

};

for (var i=0; i

this.low_nutrients[i].recs = [];

this.recs[this.low_nutrients[i].id] = [];

for (var k=0; k

var ndbno = this.low_nutrients[i].food_map[k];

getItem(ndbno,i,this.low_nutrients[i].id);

}

}

console.log(this.recs)

}

我想this.recs，使之与相当于营养ID(即我们存储)属性的对象。每个营养素都有一个food_map数组附加到包含id的食物的对象，这将是建议。我需要将这些ID(ndbno)发送到http请求以接收该食品推荐(项目)的对象。

this.recs对象实际上正确填充(尽管可能有更好的方法来编写我的代码)，但是因为它在循环中等待并承诺，所以html在对象完成之前呈现。因此，我的html是空白的。一旦更新了承诺结果，我如何在html上显示recs？

这里是我的HTML：

{{nutrient.name}}

Recommended Foods:

Recs:

{{rec}}

所需的对象this.recs应该是这个样子(和它不显示此控制台)：

this.recs = {

291: [{},{},{}],

316: [{},{},{}]

}

2017-08-03

laura42