I would like to get the value of the selected values in a v-autocomplete when the blur event is triggerd. The value $event.target.value is always set to an empty string. I found a workaround by splitting the parentElement's innerText as such:
var value = $event.parentElement.innerText;
value = value ? value.split('\n') : [];
It is worth noting that this only happens when I set the multiple prop in v-autocomplete:
<template v-slot:item.fieldName="{ item }">
<v-autocomplete
multiple
small-chips
:value="item.fieldName"
:items="items"
color="primary"
@blur="updateItem(item, $event.target.value, 'fieldName')">
</v-autocomplete>
</template>
I could not find anything concerning this issue. Am I not supposed to use this input this way ?
Did you try using it with a v-model? Two-way binding should be used here so we will not need to manually get the items using $event.target.value.
<v-autocomplete
v-model="values"
:items="items"
dense
chips
small-chips
label="Solo"
multiple
solo
></v-autocomplete>
So you should be able to get the data directly from the values field. For reference: https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-autocomplete/prop-dense.vue