Vue2版Vuetify中v-autocomplete开启multiple属性后下拉菜单失效

在Vue2对应的最新版Vuetify中，使用v-autocomplete并开启multiple属性后，下拉菜单无法显示；切换为v-select时该属性正常工作，手动给v-model赋值能选中选项，但组件仍无法正常触发下拉。

问题原因 #

Vuetify 2.x的v-autocomplete多选模式依赖特定的可视化渲染属性来触发正常交互逻辑——必须配合chips或tags属性使用，否则下拉菜单的触发机制会失效。

修复代码 #

<template>
  <div>
    <v-autocomplete
      v-model="office"
      :items="locations"
      multiple
      chips
      label="选择办公地点"
    ></v-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      locations: ["Toronto", "New York", "San Jose", "Vancouver"],
      office: [],
    };
  },
};
</script>

说明 #

• 添加chips属性后，选中的选项会以标签形式展示，这会激活v-autocomplete多选模式下的完整交互逻辑，下拉菜单即可正常弹出。
• 若不需要chips样式，也可替换为tags属性，它会将选中项以纯文本标签形式展示，同样能解决下拉不显示的问题。

内容的提问来源于stack exchange，提问作者Monicake