I have an a menu dropdown that will show if certain condition is met based on props received.
here I'm using Laravel with Inertia, the condition is passed from controller then checked by class binding in vue. When the condition is met, it should show the menu somehow it is not working
In PlantCharacteristic.vue it receives the Content props from its Controller
PlantCharacteristic.vue :
<template>
<div class="relative bg-neutral overflow-x-hidden no-scrollbar">
<Navbar class="sticky top-0 z-50"></Navbar>
<div class="flex h-screen w-screen">
<div class="w-[30%] h-screen">
<Menu
:Content="content"
:Plants="plants"
:Algaes="algae"
:NutDefs="nutrientDef"
></Menu>
</div>
<div class="w-[70%] h-screen">
<div v-if="content == 'plants'">
<Detail :Desc="content" :Payload="payload"></Detail>
</div>
<div v-else-if="content == 'nutDef'">
<Detail :Desc="content" :Payload="payload"></Detail>
</div>
<div v-else>
<Detail :Desc="content" :Payload="payload"></Detail>
</div>
</div>
</div>
</div>
</template>
<script>
import Navbar from "../Home/Navbar.vue";
import Menu from "./Menu.vue";
import Detail from "./Content/DetailPlants.vue";
export default {
props: ["content", "plants", "algae", "nutrientDef", "payload"],
components: {
Menu,
Detail,
Navbar,
},
setup(props) {
// console.log(props.content);
return {};
},
};
</script>
<style scoped>
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>
Then the prop Content is passed to Menu.vue which contain dropdown elements. In the Menu.vue it receives the prop then check it with class binding
Menu.vue :
<template>
<div>
<div
class="font-montserrat text-primary h-screen overflow-x-auto no-scrollbar pb-10"
>
<ul class="menu p-5 bg-neutral w-full h-max">
<li>
<span
@click="toggleActive1()"
:class="{
'menu-dropdown-show': isActive1,
}"
class="text-lg menu-dropdown-toggle menu-dropdown-hide"
>
<img
src="/icons/plantsico.png"
class="w-[42px] h-[25px]"
/>
Plant Characteristics
</span>
<ul
:class="{
'menu-dropdown-show': Content == 'plants',
'menu-dropdown-show': isActive1,
}"
class="menu-dropdown"
>
<li v-for="plant in Plants">
<Link
:href="route('plantCharacteristic')"
:data="{ content: 'plants', id: plant.id }"
><a>{{ plant.name }}</a></Link
>
</li>
</ul>
</li>
<li>
<span
@click="toggleActive2()"
:class="{
'menu-dropdown-show': isActive2,
}"
class="text-lg menu-dropdown-toggle menu-dropdown-hide"
>
<img
src="/icons/nutrientico.png"
class="w-[42px] h-[34.29px]"
/>
Nutrient Deficiencies
</span>
<ul
:class="{
'menu-dropdown-show': Content == 'nutDef',
'menu-dropdown-show': isActive2,
}"
class="menu-dropdown"
>
<li v-for="nutDef in NutDefs">
<Link
:href="route('plantCharacteristic')"
:data="{ content: 'nutDef', id: nutDef.id }"
><a>{{ nutDef.name }}</a></Link
>
</li>
</ul>
</li>
<li>
<span
@click="toggleActive3()"
:class="{
'menu-dropdown-show': isActive3,
}"
class="text-lg menu-dropdown-toggle menu-dropdown-hide"
>
<img
src="/icons/algaeico.png"
class="w-[42px] h-[35.72px]"
/>
Algae Characteristics
</span>
<ul
:class="{
'menu-dropdown-show': Content == 'algae',
'menu-dropdown-show': isActive3,
}"
class="menu-dropdown"
>
<li v-for="algae in Algaes">
<Link
:href="route('plantCharacteristic')"
:data="{ content: 'algae', id: algae.id }"
><a>{{ algae.name }}</a></Link
>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
import { Link } from "@inertiajs/vue3";
import { ref } from "vue";
export default {
props: ["Content", "Plants", "Algaes", "NutDefs"],
components: {
Link,
},
setup(props) {
const isActive1 = ref(false);
const isActive2 = ref(false);
const isActive3 = ref(false);
const contentDesc = ref(props.Content);
// console.log(contentDesc.value);
return { contentDesc, isActive1, isActive2, isActive3 };
},
methods: {
toggleActive1() {
console.log(this.isActive1);
this.isActive1 = !this.isActive1;
},
toggleActive2() {
console.log(this.isActive2);
this.isActive2 = !this.isActive2;
},
toggleActive3() {
console.log(this.isActive3);
this.isActive3 = !this.isActive3;
},
},
};
</script>
<style scoped>
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>
When the condition is met, it should display certain menu content by adding menu-dropdown-show in the class property
ex : the prop passed as Content is nutDef then it will add menu-dropdown-show to <ul></ul> elements then show the menu items
I've been tried different approach by declare each Content string for checking to boolean like this
<template>
<div>
<div
class="font-montserrat text-primary h-screen overflow-x-auto no-scrollbar pb-10"
>
<ul class="menu p-5 bg-neutral w-full h-max">
<li>
<span
@click="toggleActive1()"
:class="{
'menu-dropdown-show': isActive1,
}"
class="text-lg menu-dropdown-toggle menu-dropdown-hide"
>
<img
src="/icons/plantsico.png"
class="w-[42px] h-[25px]"
/>
Plant Characteristics
</span>
<ul
:class="{
'menu-dropdown-show': categories1,
'menu-dropdown-show': isActive1,
}"
class="menu-dropdown"
>
<li v-for="plant in Plants">
<Link
:href="route('plantCharacteristic')"
:data="{ content: 'plants', id: plant.id }"
><a>{{ plant.name }}</a></Link
>
</li>
</ul>
</li>
<li>
<span
@click="toggleActive2()"
:class="{
'menu-dropdown-show': isActive2,
}"
class="text-lg menu-dropdown-toggle menu-dropdown-hide"
>
<img
src="/icons/nutrientico.png"
class="w-[42px] h-[34.29px]"
/>
Nutrient Deficiencies
</span>
<ul
:class="{
'menu-dropdown-show': categories2,
'menu-dropdown-show': isActive2,
}"
class="menu-dropdown"
>
<li v-for="nutDef in NutDefs">
<Link
:href="route('plantCharacteristic')"
:data="{ content: 'nutDef', id: nutDef.id }"
><a>{{ nutDef.name }}</a></Link
>
</li>
</ul>
</li>
<li>
<span
@click="toggleActive3()"
:class="{
'menu-dropdown-show': isActive3,
}"
class="text-lg menu-dropdown-toggle menu-dropdown-hide"
>
<img
src="/icons/algaeico.png"
class="w-[42px] h-[35.72px]"
/>
Algae Characteristics
</span>
<ul
:class="{
'menu-dropdown-show': categories3,
'menu-dropdown-show': isActive3,
}"
class="menu-dropdown"
>
<li v-for="algae in Algaes">
<Link
:href="route('plantCharacteristic')"
:data="{ content: 'algae', id: algae.id }"
><a>{{ algae.name }}</a></Link
>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
import { Link } from "@inertiajs/vue3";
import { onMounted, ref } from "vue";
export default {
props: ["Content", "Plants", "Algaes", "NutDefs"],
components: {
Link,
},
setup(props) {
const isActive1 = ref(false);
const isActive2 = ref(false);
const isActive3 = ref(false);
const categories1 = ref(false);
const categories2 = ref(false);
const categories3 = ref(false);
onMounted(() => {
if (props.Content == "plants") {
categories1.value = true;
console.log("Categories 1 : " + categories1.value);
} else if (props.Content == "nutDef") {
categories2.value = true;
console.log("Categories 2 : " + categories2.value);
} else if (props.Content == "algae") {
categories3.value = true;
console.log("Categories 3 : " + categories3.value);
}
});
// const checkContent = () => {};
const contentDesc = ref(props.Content);
// checkContent();
// console.log(contentDesc.value);
return {
contentDesc,
isActive1,
isActive2,
isActive3,
categories1,
categories2,
categories3,
};
},
methods: {
toggleActive1() {
console.log(this.isActive1);
console.log(this.Content);
console.log(this.categories1);
this.isActive1 = !this.isActive1;
},
toggleActive2() {
console.log(this.isActive2);
console.log(this.Content);
console.log(this.categories2);
this.isActive2 = !this.isActive2;
},
toggleActive3() {
console.log(this.isActive3);
console.log(this.Content);
console.log(this.categories3);
this.isActive3 = !this.isActive3;
},
},
};
</script>
<style scoped>
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>
But it still not applied in the class properties even though the value of the categories is changed based on Content checking in the onMounted state
the categories is changed based on the if statements
The class not added even though it should be passes the class bind check
menu-dropdown-show is not applied in elements
