Alpinexpressionsfehler: Karten sind nicht definiert ⇐ HTML

[Anonymous]

Ich habe diese Ansichten/home.html:

Code: Select all

Bienvenue sur SwiftDeli !

Commencez à créer et partager des recettes, ingrédients et listes de
courses.



[url=card.url]


[/url]

Und diese Ansichten/Home.js:

Code: Select all

import template from "./Home.html?raw";
console.log("HTML Home View Loaded");

// Define the cards array
const cards = [
{
url: "/create-recipe",
title: "Ajouter une recette",
description: "Cliquez pour créer une nouvelle recette.",
},
{
url: "/recipes",
title: "Consulter les recettes",
description: "Cliquez pour voir toutes les recettes.",
},
{
url: "/groceries",
title: "Aller aux courses",
description: "Cliquez pour voir votre liste de courses.",
},
];

// Register the cards component with Alpine.js
document.addEventListener("alpine:init", () => {
console.log("Alpine.js initialized");
Alpine.data("cards", () => ({
cards: cards,
}));
});

// Initialize the component
export default () => ({
init() {
console.log("Home View Loaded");

// Inject the template into the DOM
const contentElement = document.getElementById("content");
contentElement.innerHTML = template;

// Initialize Alpine.js on the new content
Alpine.initTree(contentElement);
console.log("Alpine.js initialized on new content");
},
});

< /code>
Ich verwende vite, die gut zu funktionieren scheinen, und hier ist meine main.js: < /p>
import Alpine from "alpinejs";
import Navigo from "navigo";

// Initialize Alpine.js
window.Alpine = Alpine;
Alpine.start();

// Initialize Navigo router
const router = new Navigo("/");

// Define views (dynamically loaded)
const views = {
home: () => import("./views/Home.js")
};

// Router setup
router.on({
"/": async () => {
const { default: Home } = await views.home();
const homeView = Home();
homeView.init();
},
"*": () => {
document.getElementById("content").innerHTML = "Page non trouvée";
},
});

router.resolve();

Beim Laden der Homepage erhalte ich einen Alpine -Expressionsfehler: Karten sind nicht definiert . Ich habe das Gefühl, dass die Kartenvariable nicht an die HTML übergeben wird, aber ich frage mich, wie ich das überprüfen und dieses Problem lösen kann. Ich kann mein Layout gut sehen, nur ohne die Karten.