[Vuejs]-How can I hide the other elements when one dropdown menu is click

by

1👍

✅

Maybe I’m grossly over-simplifying your problem, but as I mentioned in comment, why not change your apps data state with the buttons, and then use a v-if to check state of your data, toggling visibility. The data probably should be an array of objects, perhaps something like this:

<template>
    <h2>Show Hide Menus</h2>
    <button v-for="item in hideShows" :key="item.text" @click="show(item)">
        Button {{ item.text }} 
    </button>

    <div v-for="item in hideShows" :key="item.text">
        <span v-if="item.value">Show {{ item.text }}</span>
    </div>
</template> 
       
       
<script setup>
import { ref } from 'vue';
const hideShows = ref([
    {
        text: "1",
        value: true
    },
    {
        text: "2",
        value: false
    },
    {
        text: "3",
        value: false
    }
]);

function setAllFalse() {
    hideShows.value.forEach(hideShow => {
        hideShow.value = false;
    })
}

function show(item) {
    setAllFalse();
    item.value = !item.value;
}
</script>
👤Hovercraft Full Of Eels

Leave a comment