vuetify monitor if user clicks outside of menu-CodePudding

I have a simple autocomplete menu just like the one below. Is there any way to monitor if the user clicks outside the menu? By default, if the user clicks outside the menu, it will close the menu. But I would like to trigger other actions besides just closing the menu.

I will keep it simple with the following scenario: I have a boolean variable called myBoolVar that has a default value of false. When the autocomplete is mounted, it will autofocus the input and the menu will only open when the user starts typing in the input. Untill here the myBoolVar remains false. but only when the user clicks outside of the menu, then the menu closes and the myBoolVar changes to true.

I have been through vuetify api documentation without any luck so far.

        <v-autocomplete
          v-model="valuesActor"
          :items="actorArray"
          :search-input.sync="searchActor"
          filled
          autofocus
          background-color=#313131
          append-icon=""
          prepend-inner-icon="mdi-arrow-left"
          color="var(--textLightGrey)"
        >
       
        </v-autocomplete>

CodePudding user response：

You can use blur event for autocomplete like that:



    methods: {
      someMethod() {
        alert('tadam')
      }
    }
    <v-autocomplete
      v-model="value"
      :items="items"
      @blur="someMethod"
    />




You can find the documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events

CodePudding user response：

You can use the v-click-outside directive calls a function when something outside of the target element is clicked on.

for more info see the vuetify: v-click-outside docs.

You can use something like this

<v-autocomplete
v-click-outside="onClickOutside"
....
and on click outside you can call method



methods: {
      onClickOutside () {
        ....
      },
    },