CODEWITHSUNDEEP
vue.jsvuetify.jsv-select
Patrick
Patrick

Reputation: 139

vuetify v-select multiple text values

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.

Upvotes: 1

Views: 14158

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14259

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}`
  }
}

Upvotes: 6

Related Questions