I'm not very experienced with Vue and I'm finding it a bit complex to grasp. Perhaps you guys can provide the "best practice" or most efficient solution for my issue:
I have an autocomplete dropdown box. When expanded, it shows a list with clickable items. I want to retrieve the information of the item that the mouse hovers over in the list. For example, the method "doFunnyStuff" would pass the data of the hovered object to a function when hovering over it, and perform some action with it (possibly externally)
Thank you in advance for any helpful suggestions!
<template>
<v-autocomplete
v-model="selected"
dense
outlined
hide-details
return-object
background-color="white"
light
:placeholder="placeholder"
hide-no-data
style="width: 500px"
:loading="loading"
:search-input.sync="query"
:items="items"
clearable
>
<template slot="selection" slot-scope="{ item }" return-object>
<v-list-item @mouseenter="doFunnyStuff(item)">
<v-list-item-content>
<v-list-item-title> {{ item.text }}} </v-list-item-title>
</v-list-item-content>
</v-list-item>
</template></v-autocomplete
>
</template>
</template>