vuetify v-select multiple text values

Question

i am trying to set mutliple text items in a v-select. at the moment this is my v-select and its working with one :item-text. But i need to display two fields. so i was checking the documentation and tried to use slots.

<v-select
            :disabled="isReadOnly()"
            v-show="!isHidden()"
            :label="getLabel()"
            :hint="field.description"
            :items="selectVal"


            :item-value="field.options.select.ValueField"
            :item-text="field.options.select.TextField"

            :multiple="isType(FieldType.ManyToMany)"
            :chips="isType(FieldType.ManyToMany)"

            v-model="fieldValue"
            :rules=rules()
            return-object
    >
    </v-select>

But when i am doing this:

     <template slot="selection" slot-scope="data">
                {{ data.item.name }} - {{ data.item.description }}
            </template>
            <template slot="item" slot-scope="data">
                {{ data.item.name }} - {{ data.item.description }}
            </template>

the default behavior of v-select must be reimplemented. (chips, displaying checkboxes on multiple select....

is there another way to do this? without copying the default behaviors und have duplicated code for this simple task?

thanks in advance. sorry for the beginner question.

Answer 1

item-text can also be a function so you can do something like this

<v-select
            :disabled="isReadOnly()"
            v-show="!isHidden()"
            :label="getLabel()"
            :hint="field.description"
            :items="selectVal"


            :item-value="field.options.select.ValueField"
            :item-text="getFieldText"

            :multiple="isType(FieldType.ManyToMany)"
            :chips="isType(FieldType.ManyToMany)"

            v-model="fieldValue"
            :rules=rules()
            return-object
    >
    </v-select>

methods:
{
  getFieldText (item)
  {
    return `${item.name} - ${item.description}`
  }
}