javascript - Vue.js v-for 在应用程序中不起作用

Question

我有一个 Vue.js 应用程序。我通过 ajax 得到一个列表:

    $.ajax({
    method: 'POST',
    dataType: 'json',
    url: this.base_info.url + 'getavailability?token=' + this.token,
    data: this.search_info,
    success: function (list) {
        this.results = list;
        console.log(list);
    }.bind(this)
});

结果如下:

{
  "success": "true",
  "error": "false",
  "items": [
    {
      "relation_id": "9961",
      "recommendation_id": "1",
      "combination_id": "3",
      "total_fare": "5530000",
      "quantity_adult": "1",
      "totalfare_adult": "5,530,000",
      "quantity_child": "0",
      "totalfare_child": "0",
      "quantity_infant": "0",
      "totalfare_infant": "0",
      "airlines_name": "Qatar Airways",
      "airline_logo": "QR"
    },
    {
      "relation_id": "9962",
      "recommendation_id": "1",
      "combination_id": "4",
      "total_fare": "5530000",
      "quantity_adult": "1",
      "totalfare_adult": "5,530,000",
      "quantity_child": "0",
      "totalfare_child": "0",
      "quantity_infant": "0",
      "totalfare_infant": "0",
      "airlines_name": "Qatar Airways",
      "airline_logo": "QR"
    },
  ]
}

当我通过 Vue js 循环遍历结果时，它在我的表中输出和空行。

<div v-for="item in results.items">
     <span class="big db">{{item.total_fare}}</span>
</div>

不知道哪个部分有问题。

Answer 1

在您的成功处理程序中附加如下项目

this.$set('results.items', list);

这可能会强制执行摘要循环，以防 results.items 最初未在您的数据中声明，它们将被评估。