vue.js - vuetify v-选择多个文本值

Question

我正在尝试在 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 的默认行为。（芯片，在多选时显示复选框......

还有另一种方法吗？没有复制默认行为并且有重复的代码来完成这个简单的任务？

提前致谢。对不起初学者的问题。

Answer 1

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