Question

我是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.length; i++) {
                this.low_nutrients[i].recs = [];
                this.recs[this.low_nutrients[i].id] = [];

                for (var k=0; k<this.low_nutrients[i].food_map.length; 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请求以接收该食物推荐（item）的对象。

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

这是我的HTML：

<div v-for="(nutrient, idx) in low_nutrients">
  <h2>{{nutrient.name}}</h2>
  <div>Recommended Foods:</div>
  <div>
    <div>Recs:</div>
    <div v-for="rec in recs[nutrient.id]">{{rec}}</div>
  </div>
 </div>

所需的对象this.recs应该看起来像这样（并且它确实在控制台中显示了这一点）：

this.recs = {
    291: [{},{},{}],
    316: [{},{},{}]
}

Answer 1

问题是this.recs开始是空的。 Vue cannot detect property additions，因此您必须使用set告诉它已添加新属性（以及使这些属性具有反应性）。

或者您可以将新对象重新分配给this.recs，而不是修改其内容。

使用$ http响应VueJS

1 个答案: