The task is to create a Button, which opens a Modal. When I click the button, nothing opens. Can anyonee help? I have added the Button to the navbar of the header.vue component. I deleted the code for the navbar so its less complicated to read the code.
<template>
<nav class="navbar bg-light">
<!-- TODO: button -->
<button class="btn btn-info" id="buttonToggleModal" @click="openModal">Create new Task</button>
<example-modal ref="modal"></example-modal>
</div>
</nav>
Now I need to implement the Event handling in the Parent Component (App.vue). Again I deleted all unnecessary code like imports, and only left the needed code for the task.
<template>
<!-- TODO: add Modal component and event handling -->
<Header :title="title" :openModal="openModal"/>
<Board :columns="columns" />
<Modal :show="showModal" @closeModal="closeModal" />
<script setup> const showModal = ref(false); const methods = {
openModal() {
// Setzen Sie den Zustand auf true, um das Modal zu öffnen
showModal.value = true;
},
openEditModal(data){
// <handle with your data>
this.$root.$emit("bv::show::modal", "exampleModal");
}
};
Why does nothing happen when I click the button?
openModalinside the constmethods. It's not necessary to do that, but since you did, the way to call it would be@click="methods.openModal"