如何在vuetify中使append-outer-icon图标正常工作?

时间:2019-03-01 13:22:49

标签: vuetify.js v-select

v-select允许添加append-outer-icon,但是单击该项目时如何强制扩展图标列表?

 <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允许添加回调函数,但是我在openSelect中做了什么来扩展项目列表?

1 个答案:

答案 0 :(得分:1)

您应该在v-select元素中添加ref。然后将此ref用于您的openSelect函数:

<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>