Current value doesn't reset after redirect

[zhukovsergei]

• vue-autosuggest version:
• node version: v17.4.0
• npm (or yarn) version: 8.3.1

Relevant code or config

<vue-autosuggest
    v-model="currentValue"
    :suggestions="suggestions"
    :input-props="{id:'autosuggest__input', placeholder:'Task ID'}"
    @input="onInputSuggestChange"
    @selected="handleSelectedTask"
>
    <template v-slot="{suggestion}">
        <span class="my-suggestion-item">{{suggestion.item}}</span>
    </template>
</vue-autosuggest>

        handleSelectedTask(selectedItem) {

            if(parseInt(router.currentRoute.params.id) === parseInt(selectedItem.item)) {
                return;
            }else {
                router.push({ name: 'nummer', params: { id: selectedItem.item } });
            }

            this.$nextTick(() => {
                this.currentValue = '';
            });
        },

What you did: I'm select the value and success redirect.

What happened: After first redirect current value is reset. OK

Problem description: When i'm search the second or the third times, i'm successfully redirected BUT clean current field doesn't work. VUE debugger shows this.currentValue is empty. But on the render i'm still see it:

Any ideas?

[brian-izaki]

this issue help you? https://github.com/darrenjennings/vue-autosuggest/issues/156

[Aryan3212]

<vue-autosuggest
            :key="4"

Add a key prop to your vue-autosuggest instances, looked everywhere and this finally seems to work. This is added to the documentation but it doesn't stand out.

Code demo here: https://codesandbox.io/s/vueautosuggest-multiple-vue-autosuggests-545ee?file=/AutosuggestInstance.vue