我在项目中使用vuetify,并且需要预输入组件。遗憾的是,v-autocomplete实现为带有过滤器的组合框,因此它不允许将用户输入设置为v-model(或者至少我找不到方法。)
有人可以向我解释如何实现这种功能(也许通过另一个vuetify组件)吗?我从服务器加载项目,但它们只是作为建议。用户需要具有键入和设置他们想要的任何值的能力。
这是一个基本示例 https://codepen.io/miklever/pen/oMZxzZ。问题是,如果我键入任何不以“ John”开头的单词,则v-autocomplete会在模糊时将其清除。我尝试手动设置v模型并将用户输入添加到数组,但是任何这种方法都存在问题,无法按预期工作。
<div id="app">
<v-app>
<v-content>
<v-container>
<p>Name: {{ select || 'unknown'}}</>
<v-autocomplete
:items="items"
:search-input.sync="search"
v-model="select"
cache-items
flat
hide-no-data
label="Name"
></v-autocomplete>
</v-container>
</v-content>
</v-app>
</div>
new Vue({
el: "#app",
data: () => ({
items: [],
search: null,
select: null,
commonNames: ["John", "John2", "John3"]
}),
watch: {
search(val) {
val && val !== this.select && this.querySelections(val);
}
},
methods: {
querySelections(v) {
setTimeout(() => {
this.items = this.commonNames.filter(e => {
return (e || "").toLowerCase().indexOf((v || …Run Code Online (Sandbox Code Playgroud)