我正在尝试将 v-autocomplete
选择表单与基于文本输入的动态加载项目集成到我的 Vue 组件中。项目的数据是从 http get 获得的,并经过测试是正确的。起初,这些项目看起来很好,但是一旦我进一步指定我的输入,我开始在组件中获得零项目,尽管接收到的数据包含多个零项目。在过去的几个小时里,我一直坚持这一点,所以我们将不胜感激! :-)
下面我列出了代码的相关部分和两张说明问题的图片。在文本输入字段上方,我打印了输入的第一个匹配项,在第二张照片中丢失了。我认为 v-autocomplete
组件有问题,但无法弄清楚是什么。
<!-- The log -->
<div>{{locations[0]? locations[0].name : null}}</div>
<v-autocomplete
item-value="osm_id"
v-model="selectedLocationIndex"
item-text="name"
label="Location*"
:items="locations"
:search-input.sync="locationInput"
placeholder="Start typing..."
required
>
<template slot="item" slot-scope="data">
{{ data.item.name }}
</template>
</v-autocomplete>
这是剩余的代码:
watch: {
locationInput: function(newVal, oldVal) {
this.locations = [];
if (newVal !== null && newVal !== '') {
this.getLocations(newVal).then((result) => {
const hits = result.data.hits;
hits.map(hit => {
this.locations.push(hit)
})
}).catch((err) => {
console.log('we have obtained an error', err)
});
}
}
}
下面是两张图片:
这里有效 -> https://imgur.com/z9GgQ1y
这里没有 -> https://imgur.com/B9EN7ms
最佳答案
添加无过滤器属性。
<!-- The log -->
<div>{{locations[0]? locations[0].name : null}}</div>
<v-autocomplete
item-value="osm_id"
no-filter
v-model="selectedLocationIndex"
item-text="name"
label="Location*"
:items="locations"
:search-input.sync="locationInput"
placeholder="Start typing..."
required
>
<template slot="item" slot-scope="data">
{{ data.item.name }}
</template>
</v-autocomplete>
关于javascript - Vue js v-autocomplete 不能正确更新动态更改的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54544544/