小编Kee*_*abi的帖子

我正在构建一个电子商务网站，并为产品卡创建了一个组件。我将该组件导入到主页中，以便可以显示产品列表。我在 data(){} 中声明了一个products变量 ，并创建了一个 beforeMount 并将我的逻辑放入其中以使用 axios 获取数据。

<template>
  <div>
      <section class="new__products"> 
      <div class="container">
        <div class="inner-new-products">
          <home-page-title title-text="New products"></home-page-title>
          <div class="product-cards">
            <product-card
              v-for="(product, index) in products"
              :key="index"
              :product-id="product._id"
              :old-price="product.old_price"
              :new-price="product.new_price"
              :product-image="product.product_image.reverse()[0].url"
              :product-desc="product.product_description"
              :product-name="product.product_name"
            ></product-card>
          </div>
          <!-- :product-link="product.productLink" -->
        </div>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
export default defineComponent({
  name: "Home",
  components: { ProductCard },
  data() {
     let products: { productId: string, productImage: string, productDesc: string, 
                     newPrice: number, oldPrice: number }[] = [];
     return { products };
  },
  async …