Question

vuetify组合框允许用户在组合框内键入。有关如何禁用此功能的任何线索。

这就是我实现组合框的方式。

<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>

Answer 1

组合框：

v-combobox组件是v-autocomplete，可让用户输入提供的项目中不存在的值。已建立项目将作为字符串返回。

因此，如果要禁用键入，则应使用选择：https://vuetifyjs.com/en/components/selects

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

Answer 2

我遇到了同样的问题，我使用 v-select 而不是 v-combobox，效果很好：

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

Answer 3

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

<Label x:Name="FlyoutItemLabel" />

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

Answer 4

是的，您可以使用规则代码来实现对组合框的过滤，例如

  <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可用于覆盖无结果槽，并显示未找到结果的输入。

希望这会有所帮助

Vuetify组合框-如何禁用在Vuetify的组合框中键入内容

4 个答案: