I'm currently encountering an issue on how to apply styling to a ul element inside a clicked li using Vue JavaScript. Here is my HTML code:
<ul>
<li>Menu</li>
<li @click="toggleSubMenu">Profile
<ul> //Add class here
<li>History</li>
</ul>
</li>
<li @click="toggleSubMenu">Media
<ul :class="{ 'd-block' : data.sub_menu_show}">
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
</ul>
Here is my Vue code:
<script>
import { reactive } from 'vue'
export default {
setup(){
const data = reactive({
sub_menu_show: '',
});
const toggleSubMenu = () => {
data.sub_menu_show = !data.sub_menu_show
}
return{
data,
toggleSubMenu
}
}
}
</script>
My goal is for the styling applied by toggleSubMenu to only affect the ul inside the clicked li, and not all ul elements or other sub menus. Any suggestions or help would be greatly appreciated.
Thank you in advance.