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>
【问题讨论】：
标签： vue.js combobox vuetify.js
组合框：
v-combobox 组件是一个 v-autocomplete，它允许用户 输入提供的项目中不存在的值。已创建 项目将作为字符串返回。
所以如果你想禁用输入，你应该使用一个选择：https://vuetifyjs.com/en/components/selects
选择字段组件用于收集用户提供的 选项列表中的信息。
【讨论】：
我遇到了同样的问题，我用 v-select 代替了 v-combobox，效果很好：
<v-select
return-object
></v-select>
【讨论】：
您可以在更改后删除新项目。
<v-combobox
v-model="selected"
:items="[...selected, ...items]"
multiple
@change="onChangeCombobox"
/>
onChangeCombobox(items) {
this.selected = items.filter((item) => this.items.includes(item))
}
【讨论】：
我也经历过同样的事情，我需要组合框来列出项目和自定义值，但我必须禁用输入，我的解决方案是使用关键事件并“改变”它的行为，例如：
@keydown="$event.target.blur()"
@keypress="$event.target.blur()"
@keyup="$event.target.blur()"
【讨论】：
是的，你可以通过使用规则代码来实现对组合框的过滤，例如
<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 可用于覆盖无结果槽并显示未找到结果的输入。
希望对你有所帮助
【讨论】：