How to get append-outer-icon working in vuetify?

Question

v-select allows to add append-outer-icon but how to force to expand icon list when this item is clicked?

 <v-select                
        :items="selectItems.position"
        v-model="selectedPosition"            

        clear-icon="highlight_remove"  
        append-icon="unfold_more"
        append-outer-icon="unfold_more"
        @click:append-outer="openSelect"                                                                  
        >

@click:append-outer allows add a callback function but what i have do in openSelect to expand the item's list?

What do you call "expand the item's list"? Which item's list, how do you want to expand it? — Hammerbot, Mar 01 '19 at 14:35
Every v-select component contains a list of items. And v-select expands (dropdowns!) list of items (this is standard behaviour of that component). I want to do the same clicking on some other button (append outer icon, for e.g)icon — Viktor Goncharuk, Mar 01 '19 at 15:15

score 7 · Accepted Answer · answered Mar 01 '19 at 15:28

You should add a ref to your v-select element. And then use this ref into your openSelect function:

<template>
    <v-select
        ref="theSelect"

        :items="selectItems.position"
        v-model="selectedPosition"

        clear-icon="highlight_remove"
        append-icon="unfold_more"
        append-outer-icon="unfold_more"
        @click:append-outer="openSelect"
    />
</template>

<script>
    export default {
      methods: {
        openSelect () {
          this.$refs['theSelect'].onClick()
        }
      }
    }
</script>

Note that this is not a documented feature so that could break in future releases without telling you... So check if this still works when upgrading vuetify in the future — Hammerbot, Mar 01 '19 at 16:03

How to get append-outer-icon working in vuetify?

1 Answers1