Vuetify组合框 - 如何禁用Vuetify组件中的输入功能

Question

vuetify的下拉列表(combobox)允许用户在组合框内输入文字。有没有办法禁用这个功能？

以下是我的下拉列表(combobox)的实现方式:

<v-combobox
:loading="isSurveyBeingPopulated"
class="static--inputs"
color="red"
box
:items="folders"
:rules="[rules.required]"
item-text="value"
dense
placeholder="Select Survey Folder"
item-value="key"
slot="input"
v-model="selectedSurveyFolder">
</v-combobox>

- Akshay Suresh

Answer 1

下拉框：

v-combobox组件是一个v-autocomplete，允许用户输入不在提供的选项中存在的值。创建的项目将被返回为字符串。

因此，如果您想禁用输入，请使用select: https://vuetifyjs.com/en/components/selects

选择字段组件用于从选项列表中收集用户提供的信息。

- dreijntjens

---

如果你仍然想保留过滤的功能，但不想添加新文本，该怎么办？ - Somethingwhatever

Select有一个filter属性可以使用，否则您可以使用https://vuetifyjs.com/en/components/autocompletes。 - dreijntjens

很晚才来参加派对，但我正在寻找这个答案，因为我认为<v-select>组件没有“item”插槽。结果它确实有，我只需要停止查看组件页面（https://vuetifyjs.com/en/components/selects/#slots）并开始查看API页面（https://vuetifyjs.com/en/api/v-select/#slots）。组件页面未列出所有插槽。 - Brick

Answer 2

我曾经遇到过同样的问题，我需要使用下拉框列出项目和自定义值，但我必须禁用输入，我的解决方案是使用键盘事件并“更改”其行为，例如：

    @keydown="$event.target.blur()"
    @keypress="$event.target.blur()"
    @keyup="$event.target.blur()"

- schirrel

Answer 3

您可以在更改后删除新项目。

<v-combobox
    v-model="selected"
    :items="[...selected, ...items]"
    multiple
    @change="onChangeCombobox"
/>

onChangeCombobox(items) {
  this.selected = items.filter((item) => this.items.includes(item))
}

- hgkim

Answer 4

我曾经遇到同样的问题，我使用了v-select而不是v-combobox，它可以正常工作：

<v-select
  return-object
></v-select>

- Boris Bellido

---

问题是我想要渲染带有额外内容的项目，所以我想要下拉框，但不想要输入。 - Bhumit 070

Answer 5

是的，您可以使用规则代码来实现下拉框的过滤，例如：

  <v-combobox
    v-model="selection"
    :items="items"
    :search-input.sync="input"
    :rules="intRule"
    chips
    clearable
    dense
    multiple
    small-chips
    item-text="title"
    autocomplete="off"
    return-object
  >
  </v-combobox>

然后在你的脚本部分中的数据中，类似于

data() {
    return {
      selection: [],
      input: null,
      items: [],
      valid: false,
      intRule: [
        function(v) {
          if (!v || v.length < 0) {
            return false
          } else if (v.length > 0) {
            for (let i = 0; i < v.length; i++) {
              if (/[^0-9]/g.test(v[i].id)) {
                v.splice(-1, 1)
                return false
              }
            }
            return false
          } else {
            return true
          }
        }
      ]
    }
  }

input 可以用于覆盖没有结果的插槽，并显示哪些输入没有结果。

希望这有所帮助。

- silvan

---

问题与完全不同的事情有关 - 如何禁用打字。 - Jardo

但是如果您仍然想要过滤的能力，但不想要添加新文本的能力呢？... 这就是答案。 - silvan

@silvan，这个库实际上告诉你如果你不想让用户在那里输入的话，就使用v-select而不是v-combobox。 - msqar

在v-select中，无法通过输入筛选。https://vuetifyjs.com/en/components/selects/#selection但是，现在您可能更好地前往此处：https://vuetifyjs.com/en/components/autocompletes/#props - silvan