关于vue.js：Vuetify组合框-如何在vuetify的组合框中禁用键入


Vuetify combobox - How to disable typing in vuetify's combobox

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

组合框：

The v-combobox component is a v-autocomplete that allows the user to
enter values that do not exist within the provided items. Created
items will be returned as strings.

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

Select fields components are used for collecting user provided
information from a list of options.

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <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>

然后在脚本部分的数据中，像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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可用于覆盖无结果槽，并显示未找到什么输入的结果。

希望这会有所帮助

相关讨论