Problem beim Umschalten des Alpine.js-Menüs ⇐ JavaScript

[Guest]

Ich arbeite derzeit an einem Projekt mit Laravel und Alpine.js und bin auf ein kleines Problem mit der Menüumschaltfunktion gestoßen. Ich habe eine Schaltfläche, die beim Klicken die Sichtbarkeit eines Menüs umschalten soll. Das Menü wird jedoch nicht angezeigt.
Hier ist eine vereinfachte Version meines Codes:
resources/views/test.blade.php :

Code: Select all

@vite(['resources/js/app.js'])


Toggle menu

Menu is open.

resources/js/app.js:

Code: Select all

import Alpine from 'alpinejs';
window.Alpine = Alpine;
window.data = function data() {
return {
isMenuOpen: false,
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
},
closeMenu() {
this.isMenuOpen = false;
},
}
}
Alpine.start();

Ich habe eine Debugbar für Alpine.js installiert, um das Problem zu untersuchen. Das Problem scheint darin zu bestehen, dass die Variable isMenuOpen auf true gesetzt wird, wenn ich auf die Schaltfläche klicke, sich aber schnell wieder in false ändert, wodurch das Menü sofort geschlossen wird.
Hat jemand Vorschläge, wie man dafür sorgen kann, dass das Menü nach dem Klicken auf die Schaltfläche geöffnet bleibt? Wir würden uns über jede Hilfe sehr freuen!
Vielen Dank im Voraus!