I need the v-autocomplete component to show the full text of the selected element.
In the selection it appears correctly:
But once selected it is shown like this, I don't know that the full text does not appear:
1 Answers
Solution 1
Maybe you want to use the selection slot of the v-autocomplete and split your value into parts for better reading.
<v-autocomplete
v-model="value"
:items="items"
dense
filled
label="Filled"
>
<template v-slot:selection="{ item }">
<div class="d-flex flex-column">
<span>First</span> <!-- or e.g. item.fullname -->
<span>Second</span> <!-- or e.g. item.address -->
</div>
</template>
</v-autocomplete>
Will result in:
Solution 2
Or you could use word-break: break-all; like
.v-autocomplete .v-select__selections {
word-break: break-all;
}
Related