vuetify 的 v-autocomplete 选择选项后无法编辑文本输入答案

【问题标题】：vuetify's v-autocomplete can't edit text input after selecting an optionvuetify 的 v-autocomplete 选择选项后无法编辑文本输入
【发布时间】：2019-01-23 06:55:21
【问题描述】：

Code is on codepen:

https://codepen.io/anon/pen/exYjOZ

如果您转到此页面并在搜索框中输入“joe”，请选择出现的两个 Joe 之一，然后尝试在搜索框中选择文本，或者尝试使用退格键仅删除最后一个字符。

你会看到它不允许你编辑文本输入，它只能在按两次退格键后删除文本输入中的整个文本。

它应该允许我在选择一个选项后选择/编辑文本输入，就像选择它之前一样。

【问题讨论】：

标签： javascript html vue.js autocomplete vuetify.js

【解决方案1】：

我认为原因是使用slot="selection"

要使其正常工作，您可以改用item-text

   <v-autocomplete 
      ...
      text="displayText">
   </v-autocomplete>

并定义displayText方法：

methods: {
  ...
  displayText (item) {
     return item.firstName + " " + item.lastName
  }
}

请查看demo on codepen

【讨论】：

这种方法有一个问题 - 如果您有两个具有相同 item-text 的项目，它不会在列表中显示多个项目。检查这个 codepen，我只是将其更改为有两个 John Smiths（但请注意，他们是不同的人，为不同的雇主工作等）并将 vuetify 版本更改为 1.2.9，因为这就是我在我的项目中使用的：codepen.io/anon/pen/LaNZNL
我也在 vuetify github 上创建了问题：github.com/vuetifyjs/vuetify/issues/6657
item-value="id" 需要添加以修复此行为。请更新您的答案，我会再次接受。