Not binding result to vue model inside v-for

[37Rb]

• vue-autosuggest version: 2.2.0
• node version: 16.1.0
• npm (or yarn) version: 7.11.2

<ul class="postings">
    <li v-for="(posting, index) in transaction.postings" :key="posting.id">
        <VueAutosuggest v-model="posting.account"
            :suggestions="filterAccounts(posting.account)"
            :input-props="{id:'p'+index+'__input', class:'p-account', placeholder:'account'}">
            <template slot-scope="{suggestion}">
                <span>{{ suggestion.item }}</span>
            </template>
        </VueAutosuggest>
    </li>
</ul>

I'm using vue-autosuggest in a dynamic list, list items are added and removed at runtime. Everything seems to work fine except the selected suggestions are not being stored in transaction.postings[i].account. Instead, when I read from transaction.postings[i].account I get back whatever was typed into the input element.

1. Start with an empty input.
2. Begin typing (e.g. dog) and the suggestions are filtered as expected.
3. Select a suggestion (e.g. dogs and cats) and the suggestion is set as the input value as expected.
4. Read the values in transaction.postings[i].account (aka posting.account).

Instead of the suggestion value (dogs and cats) that's showing in the input, transaction.postings[i].account contains exactly what I typed (dog). I have also tried using :get-suggestion-value and @selected to no avail but I don't think they are necessary for this use case.

How do I get the suggestion value to show up in the vue model?

[darrenjennings]

@37Rb can you provide a codesandbox demonstrating the issue? example CS: https://codesandbox.io/s/vueautosuggest-api-fetching-57d4e

[37Rb]

I figured out a way around it by looking at the multiple instances example in the storybook. I added a selected function and passed in the v-for index so I could set the model manually. Not sure if it's supposed to automatically bind but this seems to work fine.

<ul class="postings">
    <li v-for="(posting, index) in transaction.postings" :key="posting.id">
        <VueAutosuggest v-model="posting.account"
            :suggestions="filterAccounts(posting.account)"
            :input-props="{id:'p'+index+'__input', class:'p-account', placeholder:'account'}"
            @selected="(suggestion) => accountSelected(index, suggestion.item)">
            <template slot-scope="{suggestion}">
                <span>{{ suggestion.item }}</span>
            </template>
        </VueAutosuggest>
    </li>
</ul>