小编use*_*246的帖子

Vue js v-autocomplete 不会正确更新动态更改的项目

我正在尝试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>
Run Code Online (Sandbox Code Playgroud)

这是其余的代码:

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)
            });
        } …
Run Code Online (Sandbox Code Playgroud)

javascript forms vue.js vuetify.js

4
推荐指数
1
解决办法
4511
查看次数

标签 统计

forms ×1

javascript ×1

vue.js ×1

vuetify.js ×1