I'm encountering an issue displaying data from an array in a .js file on the frontend. Despite following the correct import procedures, the content remains blank. I'm unsure what could be causing this problem.
The javascript file:
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,
},
];
Below is the front-end code snippet:
<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>
Unfortunately, the output appears blank and upon inspection of the page, the code within the <div shop-grid doesn't seem to render.