I have a Buefy autocomplete field in my project.
<b-field>
<b-autocomplete
v-model="client"
:data="agencyClients"
field="name"
@input="setClient"
:clearable="true"
open-on-focus
size="is-small"
>
</b-autocomplete>
</b-field>
The v-model property should be the object in form
{id: 10, name: 'AAA'}
Therefore I use field property in the input which is set to name. This basic set up works well. But if I trigger @input event which looks like
async setClient(clientName) {
if( clientName ) {
const client = this.agencyClients.find((item) => item && item.name === clientName);
if( client ) {
await this.$store.dispatch(`${this.storeName}/updateClientId`, {clientId: client.id});
this.client = client; // Set client as object.
}
}
},
I get and [object] as value in input field. Autocomplete is not able to show client.name value as onload. Why is it so?
The second issue is that with deselect function. It does not trigger @input event. It does not make sence. If I clear the value input event is not triggered? Why?
Can somebody explain me what am I doing wrong? Thanks a lot.