In my Vue application, I am trying to create a Drop Down Menu by using a variable called "showDropDown". The idea is to use a v-if directive to check if the value of showDropDown is true, and then display the menu accordingly. Additionally, I want to implement a feature where clicking on the Menu icon toggles the visibility of the Menu by changing the value of showDropDown to false. However, I have encountered some issues with the code below. It seems to work fine when vue is used through CDN, but not in my current setup.
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import MainPage from './components/MainPage.vue'
import ProfilePage from './components/ProfilePage.vue'
import FriendsPage from './components/FriendsPage.vue'
import SettingsPage from './components/SettingsPage.vue'
import SignOutPage from './components/SignOutPage.vue'
const currentView = "mainPage";
const showDropDown = ref(false);
const imgSrcProfile = "./src/assets/defaultUserIcon.webp";
const imgSrcLogo = "./src/assets/DailyQuotes_Logo.png";
function toggleDropDown() {
console.log("test");
showDropDown = !showDropDown;
}
</script>
<template>
<main>
<header>
<div class="logo">
<img v-on:click="currentComponent='mainPage'" :src="imgSrcLogo">
</div>
<div class="profile" >
<img v-on:click="toggleDropDown" :src="imgSrcProfile">
<div id="dropDownMenu" v-if="showDropDown">
<a v-on:click="currentComponent = 'profile'">Profile</a>
<a v-on:click="currentComponent = 'friends'">Friends</a>
<a v-on:click="currentComponent = 'settings'">Settings</a>
<a v-on:click="currentComponent = 'signOut'">Sign out</a>
</div>
</div>
</header>
<MainPage/>
</main>
</template>