I'm attempting to create a toggle button that opens a hamburger menu when clicked.
I created the boolean property "clicked" in the file "App.vue", passed it down to "Navbar.vue", and now I want to be able to toggle the "clicked" property to either "true" or "false" by clicking in the navbar, in order to show or hide the backdrop and drawer.
I attempted to use an "emit" function, which seems to be working, but the template is not responding to the "clicked" variable and is still showing even when it should be hidden (when false).
In the code provided below, where did I make a mistake? How do you implement conditional rendering with props? Can anyone offer assistance?
App.vue
<template>
<NavBar :clicked="clicked" @toggleDrawer="toggleMenu()" />
<BackDrop :clicked="clicked" />
<SideDrawer :clicked="clicked" />
<router-view></router-view>
</template>
<script>
export default {
name: "App",
components: { NavBar, BackDrop, SideDrawer },
setup() {
const clicked = ref(false);
const toggleMenu = () => {
clicked.value = !clicked.value;
};
return { clicked, toggleMenu };
},
};
</script>
NavBar.vue
<template>
<nav class="navbar">
/* MORE CODE */
<div class="hamburger_menu" @click="toggleEvent">
<div></div>
<div></div>
<div></div>
</div>
</nav>
</template>
<script setup>
import { defineEmits, defineProps } from "vue";
const props = defineProps({
clicked: Boolean,
});
const emit = defineEmits(["toggleDrawer"]);
const toggleEvent = () => {
console.log("toggleEvent running");
emit("toggleDrawer", !props.clicked);
};
</script>
Backdrop.vue
<template v-if="props.clicked">
<div class="backdrop"></div>
</template>
<script setup>
import { defineProps } from "vue";
// eslint-disable-next-line no-unused-vars
const props = defineProps({
clicked: Boolean,
});
</script>
SideDrawer.vue
<template v-if="props.clicked">
<div class="sidedrawer"></div>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
clicked: Boolean,
});
</script>
Am I passing the prop incorrectly? Is "props.clicked" not functioning in "v-if" directives or templates? How should I incorporate the "v-if" directive with the "clicked" property I have?