vuetify v-выберите несколько текстовых значений - PullRequest
Новая
       21

vuetify v-выберите несколько текстовых значений

0 голосов
/ 30 апреля 2020

Я пытаюсь установить несколько текстовых элементов в v-select. на данный момент это мой v-select и он работает с одним: item-text. Но мне нужно отобразить два поля. поэтому я проверял документацию и пытался использовать слоты. 

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

Но когда я делаю это: 

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

поведение v-select по умолчанию должно быть переопределено. (фишки, отображение флажков на множественном выборе ....

есть ли другой способ сделать это? без копирования поведения по умолчанию и дублирования кода для этой простой задачи?

заранее спасибо. извините за вопрос новичка.

1 Ответ

1 голос
/ 30 апреля 2020

item-text также может быть функцией, поэтому вы можете сделать что-то вроде этого 

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