Vue前端无法渲染JS数组产品数据问题求助

问题描述 #

尝试将.js文件中的产品数组数据在Vue前端页面展示时，页面完全空白，product-grid标签内的代码未渲染，已确认导入路径正确。

相关代码 #

产品数据文件 (product-data.js) #

import lemonBottle from "./assets/lemon-bottle.webp";
import garlicBottle from "./assets/garlic-bottle.webp";
import rosemaryBottle from "./assets/rosemary-bottle.webp";
import chiliBottle from "./assets/chili-bottle.webp";
import delicateBottle from "./assets/delicate-bottle.webp";
import mediumBottle from "./assets/medium-bottle.webp";
import boldBottle from "./assets/bold-bottle.webp";

export const products = [
  {
    id: "234",
    name: "Lemon",
    price: "$26.00",
    imageName: lemonBottle,
  },
  {
    id: "345",
    name: "Garlic",
    price: "$26.00",
    imageName: garlicBottle,
  },
  {
    id: "456",
    name: "Rosemary",
    price: "$26.00",
    imageName: rosemaryBottle,
  },
  {
    id: "567",
    name: "Chili",
    price: "$26.00",
    imageName: chiliBottle,
  },
  {
    id: "678",
    name: "Delicate",
    price: "$24.50",
    imageName: delicateBottle,
  },
  {
    id: "789",
    name: "Medium",
    price: "$24.50",
    imageName: mediumBottle,
  },
  {
    id: "890",
    name: "Bold",
    price: "$24.50",
    imageName: boldBottle,
  },
];

Vue前端组件代码 #

<template>
  <div class="shop mt-20 border mx-auto w-4/6">
    <div class="product-grid md:grid grid-cols-3 md:gap-10 mt-10 p-5">
      <div
        class="border shop-item mb-5"
        v-for="product in products"
        :key="product.id"
      >
        <img class="h-[450px] w-[350px]" :src="product.imageName" />

        <p class="mt-1 text-wrap text-left text-2xl text-gray-500 font-bold">
          {{ product.name }}
        </p>
        <p class="mt-1 text-wrap text-left text-3xl font-bold">
          {{ product.price }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { products } from "@/product-data";
console.log("Products:", products);
export default {
  name: "ShopView",
  data() {
    return {
      products: [],
    };
  },
};
</script>

问题原因 #

核心问题是组件内部的products数据未被赋值：虽然已经从外部文件导入了products数组，但组件的data里初始化的products是空数组，且没有任何逻辑将导入的数组赋值给它，导致v-for循环没有数据可以渲染，最终页面空白。

可以先检查浏览器控制台的console.log("Products:", products)输出，确认导入的数组是否正常加载（如果输出正确的产品数组，说明导入路径和数据本身没问题，只需要解决赋值问题）。

解决方案 #

有两种简单的修复方式：

方式1：直接在data中初始化赋值 #

修改组件的data函数，将导入的products直接作为初始值：

data() {
  return {
    products: products, // 直接使用导入的产品数组
  };
}

方式2：在created钩子中赋值 #

如果需要后续对数据做处理，可以在组件的created生命周期钩子中赋值：

export default {
  name: "ShopView",
  data() {
    return {
      products: [],
    };
  },
  created() {
    this.products = products; // 组件创建时赋值
  },
};

修改后，v-for就能遍历到产品数据，页面会正常渲染产品网格。

内容的提问来源于stack exchange，提问作者SEYRAM EMMANUEL AGBANYO