Set initial value when using promise for list

[GreenImp]

I'm submitting a ...

• [x] support request

What is the current behavior?

I'm using an AJAX request to load in the list data, which is working fine, but I can't figure out how to define an initial value for the input, on page load.

This is a slim version of my code (Without all the debounce, class names etc.):

<template>
    <vue-simple-suggest
        :value="initialValue"
        display-attribute="text"
        value-attribute="id"
        :list="fetchData"
        mode="select"
        @select="onSelect"
        ref="suggest"
    ></vue-simple-suggest>
</template>

<script>
import VueSimpleSuggest from 'vue-simple-suggest';

export default {
    name: 'ProviderSelect',
    components: {VueSimpleSuggest},
    data() {
        return {
            // the ID of the item that should be selected
            initialValue: 6,
        };
    },
    methods: {
        fetchData(query) {
            return axios.get(...);
        },
        onSelect(selected) {
            // trigger the input event so we can update the value in the parent
            this.$emit('input', this.$refs.suggest.displayProperty(selected) ?? undefined);
        },
    },
};
</script>

As you can see, I'm setting the initialValue to the ID of the item that I want to initially select, and then binding it to the component with :value.

When the page loads, this sets the VueSimpleSuggest component's value to 6, but it also shows the number 6 in the input, whereas I want it to show the text label for the item.

What is the expected behavior?

I would like for it to make the AJAX request to load the data, and select the correct item from the list, based on the item's ID, which is specified as the value-attribute. I would like it to then visually show the item's text attribute in the input, rather than the ID - but I still need the ID value stored so I can submit it in a form.

I have tried changing the min-length to 0, which does make it load the data on page load, but I can't figure out how to get it to select the item on the initial load.

I've also tried using a custom input, so that I can try and bind the query string to the input, and the value to the component:

<template>
    <vue-simple-suggest
        :value="initialValue"
        display-attribute="text"
        value-attribute="id"
        :list="fetchData"
        mode="select"
        @select="onSelect"
        ref="suggest"
    >
        <input class="form-control" v-model="queryValue">
    </vue-simple-suggest>
</template>

<script>
import VueSimpleSuggest from 'vue-simple-suggest';

export default {
    name: 'ProviderSelect',
    components: {VueSimpleSuggest},
    data() {
        return {
            // the ID of the item that should be selected
            initialValue: 6,
            // the item's text title
            queryValue: '',
        };
    },
    methods: {
        fetchData(query) {
            return axios.get(...);
        },
        onSelect(selected) {
            // trigger the input event so we can update the value in the parent
            this.$emit('input', this.$refs.suggest.displayProperty(selected) ?? undefined);
        },
    },
};
</script>

And that does work to some extent, but doesn't help with auto-selecting the initial value.

Any help to accomplish this would be appreciated.

How are you importing Vue-simple-suggest?

• [x] Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')

Please tell us about your environment:

• Vue.js Version: 2.5.17
• Vue-simple-suggest version: 1.10.3
• Browser: Firefox 81.0.1
• Language: ES6/7

[GreenImp]

Any chance of some feedback on this? Cheers!