我可以从 v-autocomplete 输入框中隐藏选定元素的列表吗？答案

【问题标题】：Can I hide the list of selected elements from the v-autocomplete input box?我可以从 v-autocomplete 输入框中隐藏选定元素的列表吗？
【发布时间】：2020-05-28 18:49:03
【问题描述】：

我正在使用 Vuetify 的 v-autocomplete (v. 1.5) 创建一个下拉列表，如下所示：

<v-autocomplete
    v-model="autoCompleteSelected"
    placeholder="Select options from the list"
    :items="items"
    :item-text="'name'"
    :item-value="'id'"
    :search-input.sync="autoCompleteInput"
    return-object
    hide-selected
    multiple
/>

Codepen：https://codepen.io/chk1/pen/bGVPYKa

做出选择后，所选项目的值最终会出现在输入框中，在用户可以输入的实际输入的左侧。占位符也被隐藏了。我可以抑制这种行为吗？

我的目标是基本上从自动完成的输入和列表中完全删除一个项目（因为我想在其他地方列出所选项目），但我想保留v-autocomplete（内部）变量避免冗余数据处理。使用 hide-selected 只会从选择下拉列表中删除项目。

理论上我可以应用 CSS .v-select__selection { display:none }，但是如果自动完成的 v-model 中有任何项目，输入的占位符仍然丢失。

【问题讨论】：

你找到方法了吗？我的意思是除了应用display:none 之外

标签： vuetify.js

【解决方案1】：

好的，我知道如何通过覆盖样式来显示占位符。如果您使用的是作用域样式，则需要指定 ::v-deep

.v-select__selection { display:none }
::v-deep .v-select.v-input--is-dirty ::placeholder {
  color: back !important; // it's set to `transparent` by vuetify
}

【讨论】：

【解决方案2】：

是的，你可以通过简单的 hack

  <v-autocomplete
    v-model="selectedValue"
    :items="list"
    item-value="display"
    item-text="name"
    outlined
    v-bind="attrs"
    v-on="listeners"
    return-object
    hide-selected
  >
    <template v-slot:selection="">
     
    </template>
  </v-autocomplete>

关键是使用没有数据的选择模板槽。

【讨论】：