本文介绍了Vue js v-autoComplete不能正确更新动态更改的项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将v-autocompleteSELECT表单与基于文本输入的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
推荐答案
添加no-过滤属性。
<!-- 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>
这篇关于Vue js v-autoComplete不能正确更新动态更改的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！