vuetify v-select show long strings

Question

I'm making a form which includes v-select control with long string items such as

long string item to display Head
long string item to display Hands

And so on.

The v-select control will be display by using cellphones so the users should read each item, instead the following

long string ítem...
long string ítem...

Is there an option to display the complete item text into the list items?

properties: {
    slotProps: {
      type: "string",
      title: "Custom enums",
      enum: [
        'long string item to display in devices with small screens and Head',
        'long string item to display in devices with small screens and Hands',
        'long string item to display in devices with small screens and Eyes',
        'long string item to display in devices with small screens and Stomach',],
    },
    }

Here are some screen captures:

Can you please explain with an example, that what you are trying to achieve, Also if you can create a codepen for the above issue. That would be really helpful to solve your issue faster — chans

Anees Hameed Anees Hameed · Accepted Answer · 2020-05-07T17:53:00

Directly give items inside slot. this will remove text truncation.

<v-select
  v-model="select"
  :items="items"
  label="Select"
  >
  <template v-slot:item="slotProps">
    {{slotProps.item}}
  </template>
</v-select>

...
...
data: {
  select: null,
  items: [
    'long string item to display Head',
    'long string item to display Hands',
    'long string item to display Eyes',
    'long string item to display Stomach',
   ],
}

vuetify v-select show long strings

1 Answers