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