CODEWITHSUNDEEP
vuetify.js
etayluz
etayluz

Reputation: 16416

Vuetify v-select: Detect hover event and click programtically

I have this v-select:

<v-select
      @mouseover="focus"
      :items="items"
      outlined
    ></v-select>

And I would like for it to be programtically clicked whenever the user hovers the mouse over the element. Looking over the documentation https://vuetifyjs.com/en/api/v-select/ I don't see a way to listen to a hover event or to click the v-select component programtically.

Can this be achieved?

I'm also looking for a way to blur the v-select component after an item has been selected as the border is highlighted blue after selection and I don't want that:

enter image description here

Upvotes: 0

Views: 1573

Answers (2)

saylestyler
saylestyler

Reputation: 469

I was trying to open and close dropdown from v-select on mouseenter and mouseleave, and ended up having to put a ref on the element and then call the methods like so:

@mouseenter.native="openDropdown"
@mouseleave.native="closeDropdown"

openDropdown() {
  this.$refs.dropdownSelect.activateMenu()
},
closeDropdown() {
  this.$refs.dropdownSelect.blur()
},

Log this.$refs.dropdown and you'll see the methods available on it.

Upvotes: 0

user10264162
user10264162

Reputation:

Try:

<v-select
      @mouseover.native="focus"
      :items="items"
      outlined
    ></v-select>

Upvotes: 1

Related Questions