如何使 v-autocomplete/v-select 始终显示下拉菜单？

Question

我正在使用v-autocomplete，即extended from v-select。

我有一种情况，我想将此选择包装在 v-menu 中。

如果您尝试使用v-btn 激活器将v-select 包装在v-menu 中，您希望首先呈现一个按钮，当您单击该按钮时，它会显示自动完成。

查看此代码笔以了解我的意思：https://codepen.io/sntshk/pen/KKmjMPX?editors=1010

上述实现的问题是，当您单击按钮时，您最初看到的是一个压扁的下拉项目，在那里看起来非常糟糕。然后，当您通过单击专注于 v-select 时，您会看到完整的下拉列表。

我在这里想要实现的是在我单击按钮时默认使 v-select 成为焦点。当我单击按钮时，这将完全呈现列表项。

所以我的问题是，我该怎么做才能使 v-select 默认成为焦点？

Answer 1

您可以通过在v-autocomplete 上设置autofocus 属性来实现此效果，然后在此元素上监听焦点事件并执行以下操作：

@focus="$event.target.click"

这样，当菜单打开时，选择字段获得焦点，焦点事件代码使下拉菜单打开。

查看下面的演示：

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    flowers: ['foo', 'bar', 'baz', 'lorem', 'ipsum', 'something', 'else', 'to', 'make', 'itemlist', 'long']
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-menu offset-y :close-on-content-click="false">
          <template v-slot:activator="{ on, attrs }">
              <v-btn v-bind="attrs" v-on="on">foobar</v-btn>
            </template>
          <v-autocomplete autofocus :items="flowers" multiple label="Select an item" @focus="$event.target.click()"></v-autocomplete>
        </v-menu>
      </v-container>
    </v-main>
  </v-app>
</div>