I'm still new to Vue.js so far I'm liking it. Currently stuck on drop menus.

If one drop down menu is click is there a way to hide the other menus that are open?

<script setup>
import { ref } from 'vue';
const hideshow1= ref(false);
const hideshow2= ref(false);
const hideshow3= ref(false);
 
 function show1() {

    this.hideshow1= !this.hideshow1;

};

function show2() {

this.hideshow2= !this.hideshow2;

};
function show3() {

this.hideshow3= !this.hideshow3;

};


</script>


<template>
<button @click="show1()" type="button"> show</button>
<button @click="show2()" type="button"> show</button>
<button @click="show3()" type="button"> show</button>

            <div :    >show1</div>
            <div :     >show2</div>
            <div :    >show3</div>

   </template> 

CodePudding user response：

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>