v-for不会输出任何内容，即使从GET返回了数据

Question

使用NUXT创建VUE 2应用。我的异步方法返回数据很好。但是，由于某种原因，我的v-for不会产生任何html标记。

我的node.js api通过邮递员返回的测试数据是...

{
    "status": true,
    "message": [
        {
            "rating": [],
            "_id": "5e113ce50d41592e38976e45",
            "title": "Book 2",
            "description": "This is amazon book2",
            "photo": "https://amazon-clone-v1-rg.s3.amazonaws.com/xxxxx",
            "stockQuantity": 14,
            "price": 33,
            "__v": 0
        },
        {
            "rating": [],
            "_id": "5e113cf00d41592e38976e46",
            "title": "Book 1",
            "description": "This is amazon book 1",
            "photo": "https://amazon-clone-v1-rg.s3.us-east-2.amazonaws.com/xxxxx",
            "stockQuantity": 14,
            "price": 25,
            "__v": 0
        }
    ]
}

这是我的代码...

 <template>
  <main>
    <div class="a-spacing-large">
      <div class="container-fluid browsing-history">
        <div class="row">
          <div class="col-sm-8 col-8">
            <h1 class="a-size-large a-spacing-none a-text-normal">All Products</h1>
            <div class="a-spacing-large"></div>
            <!-- Button -->
            <a href="#" class="a-button-buy-again">Add a new product</a>
            <a href="#" class="a-button-history margin-right-10">Add a new category</a>
            <a href="#" class="a-button-history margin-right-10">Add a new owner</a>
          </div>
          <!-- Listing page -->
        </div>
      </div>
    </div>
    <div class="a-spacing-large"></div>
    <div class="container-fluid browsing-history">
      <div class="row">
        <div
          v-for="(product, index) in products"
          :key="product._id"
          class="col-xl-2 col-lg-2 col-md-3 col-sm-6 col-6 br bb"
        >
          <div class="history-box">
            <!-- Product image -->
            <a href="#" class="a-link-normal">
              <img :src="product.photo" class="img-fluid" />
            </a>
            <!-- Product title -->
            <div class="a-spacing-top-base asin-title">
              <span class="a-text-normal">
                <div class="pl3n-sc-truncated">{{product.title}}</div>
              </span>
            </div>
            <!-- Product rating -->
            <div class="a-row">
              <a href="#">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
              </a>
              <span class="a-letter-space"></span>
              <span class="a-color-tertiary a-size-small asin-reviews">(1732)</span>
            </div>
            <!-- Product price -->
            <div class="a-row">
              <span class="a-size-base a-color-price">
                <span class="pl3n-sc-price">${{product.price}}</span>
              </span>
            </div>
          </div>
          <!-- Product Buttons -->
          <div class="a-row">
            <a href="#" class="a-button-history margin-right-10">Update</a>
            <a href="#" class="a-button-history margin-right-10">Delete</a>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    try {
      let response = await $axios.$get("http://localhost:3000/api/products");
      console.log(response);
      return {
        products: response.products
      };
    } catch (err) {
      console.log("error in code: " + err);
    }
  }
};
</script>

我什至尝试了一个非常简单的v-for循环，但它也没有返回任何数据...

<ul>
    <li v-for="(product, index) in products">{{product.title}}</li>
</ul>

任何建议将不胜感激。谢谢！

Answer 1

在前端，您应该返回{products: response.message}，因为名为message的字段包含您的“产品”列表。

或

在您的API后端中，应使用products而不是message返回您的“产品”列表，然后可以按照您提到的方式使用您。