Close v-menu from method

Hi , guys , I created a v-menu with a build in numeric keyboard.
It is working as expected , menu is triggered when click on text field, keyboard appears and pressed numbers goes to text field. (ok so far)
keyboard has a button to finish adding numbers , this button also triggers an "accept "method.
So question is , how can I can I use this method to hide v-menu.
This is my code:

<div class="text-center">
    <v-menu offset-y
    :close-on-content-click="false"
    offset-x
    >
      <template v-slot:activator="{ on }">
        <input type="text" v-model="set_speed" 
        v-on="on"    @focus="show"
        />
      </template>
        <vue-touch-keyboard :options="options" layout="numeric" 
        :cancel="hide" :accept="accept" 
        :input="input" />
    </v-menu>
  </div>

btw: Menu hides when you click again on triggering component or every where at screen but this is not desired behaviour.

1 Like

Add a value attribute to the menu, and set it to false when you want to hide it:

 <v-menu :value="shown" ... >

In your javascript:

data() {
    return {
        shown: true
    }
},
methods() {
    this.shown = false
}

Setting the shown data field to false will dismiss the menu.

Dear Steve neal , thanks for your feedback.
I tryed your idea but. It seems to work in the oposite way.
Initializatiing value data as true, Menu is not displayed.
So , initializationg value as false, menu is displayed.
Then, I can dismiss menu , setting value to true on method.
This works as I want but only once. Then I can not open the menu again.
What im doing wrong?
Regards.
Leo.

true = shown, false = hidden.

It sounds to me like you have code of your own that’s affecting the visibility and giving the illusion that it behaves differently.

I’d comment out all if your own logic that might be doing this, and get it working with the ‘shown’ property first, then selectively reintroduce your own code to see when it breaks.

Also, when things suddenly stop doing anything at all it’s usually a result of a JavaScript exception being thrown. Have you checked your dev console for errors?

I know it sounds strange … but can not make it work, this is what I have.

<template>
  <div class="text-center">
    <v-menu offset-y :value="shown"
    :close-on-content-click="false"
    offset-x
    min-width="200"
    >
      <template v-slot:activator="{ on }">
        <input type="text" maxlength="2" 
        class="container-rounded" v-on="on"
      />
      </template>
      <button @click="closemenu">
        closethismenu
      </button>
    </v-menu>
  </div>
 </template>

<script>

export default {

  data() {
    return {
      shown: true,
    };
  },
  methods: {
    closemenu() {
      alert('closing...');
      this.shown = false;
    },
  },
};
</script>

Menu never showsup if shown is setted to true.
Very strange , I will keep investigating.
Regards.
Leandro

What version of Veutify?
Probably not a solution but you never know.

I know (probably just me) but if error in the actual component it sometimes fails to act properly.

If you check console you will / should see a notice saying "offsey-y no longer use "menu-props=“offsetY” type of message. Something along those lines.

menu-props="offsetY"

Give that a try. Doubt its the solution but it will clean up your error log :slight_smile:

Dear movepixels … I dont understand what you suggest.
there is no suche message at console.
How to check vuetify version ?

The version of vuetify can you see in yarn.lock or package-lock.json depending if you use yarn or npm as package manager.

Thanks , my friend.
Here are my packages:

[leo@arch cinta-front-end]$ grep vuetify package-lock.json
“vue-cli-plugin-vuetify”: {
“resolved”: “https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-0.6.3.tgz”,
“vuetify”: {
“resolved”: “https://registry.npmjs.org/vuetify/-/vuetify-2.0.18.tgz”,
“vuetify-loader”: {
“resolved”: “https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.3.0.tgz”,

Regards.

Vuetify can be upgraded to 2.0.19. you can do this by running npm update vuetify but I’m not sure this makes any difference but you can always try

I tried you program here: https://codesandbox.io/s/vuetify-playground-pcwd1 and it works. I just changed input to v-text-field so it was a little more visible. But the menu works every time I click in the textfield. So I guess it is something else preventing the menu from showing

1 Like

thanks johand

1 Like

@leostereo, you’ve probably already found your answer in the year since you last posted, but just in case anyone else is wondering, @steveneal’s answer works like a charm (even on vue 2.6.11 and vuetify 2.3.19). Probably the only reason leostereo was having troubles is because he initialized shown to true?

I used a version of steveneal’s answer for my own code and got exactly what I needed. In my case I wanted a menu that wouldn’t dismiss on content click (the easy part), but WOULD dismiss when you clicked a particular button inside the menu (the hard part). On that note, the following is working for me:

// Header.vue:

<v-menu
  :value="userProfileMenuIsOpen"
  :close-on-content-click="false"
>
  <v-btn @click="userProfileMenuIsOpen = true">
    <v-avatar ...etc />
  </v-btn>
  <v-card>
    <v-btn text @click="logout()"> Log out </v-btn>
  </v-card>
</v-menu>

export default {
  data() {
    return {
      userProfileMenuIsOpen: false // Default to 'false'!
    }
  },
  methods: {
    logout() {
      this.userProfileMenuIsOpen = false; // Set to 'false'
      // Do other logout actions here
    }
  }
}

So notice how you don’t initialize the value property to true, but you do set it to true when activating the menu. And when you click elsewhere in the page and the menu loses focus, Vue sets the value to false. All you need to do is initialize it to false, and then specify which buttons / elements inside your menu car / div will ALSO cause the menu to close.

I have the same problem. It is propably you found a solutions inthis time but here is how I resolve it.

@ [steveneal] solution was right. But for me It was not complete.

You should add the methods also to the v-menu element

<v-menu
bottom
:close-on-content-click=“false”
:nudge-width=“nudgeMenuWidth”
style=“boxShadow:‘unset’”
offset-y
v-model=“openMenu”
@click=“closeFilter”

Then you initialize “isShown” as false

data() {
return {
isShown: true
}
},

And the methods should do somethign like this

methods() {
this.isShown = !this.isShown
}

Finally I add the methdos also to the button I would like to use as close

v-btn< @click=“closeFilter”
color=“secondary”
fab
small
v-bind=“attrs”
v-off=“off”
>

I hope this example coud help somebody.

Cheers!!.