英文:
How to concatenate two fields in v-select's item-text vuetify
问题
Using vue2.6, vuetify 2.3，我有一个v-select菜单，其中包含一些模块名称，对于item-text，我想从显示单个值更改为将两个字段组合在一起，用连字符连接。
目前，我将item-text设置为仅显示来自我的数据库的模块名称。
<v-select
:items="deplist"
item-text="moduleName"
item-value="moduleId"
v-model="selection"
></v-select>
我想通过在item-text内部连接两个字段（moduleName,moduleNum）并在它们之间使用连字符来更改item-text组件。我可以如何做到这一点？
item-text="moduleName + '-' + moduleNum"
例如: "Mathematics-108"
英文:
Using vue2.6, vuetify 2.3, I have a v-select menu with a list of module names and for the item-text I want to change from displaying a single value to a value with 2 field combined together connecting with a hyphen.
Currently, I have the item-text to display the module name only which I got from my database.
<v-select
:items="deplist"
item-text="moduleName"
item-value="moduleId"
v-model="selection"
></v-select>
I want to change the item-text component by concacentating 2 fields (moduleName,moduleNum) with a hyphen in between. How can I do that inside item-text?
item-text="moduleName" + "-" + "moduleNum"
ex: "Mathematics-108"
答案1
得分: 1
最简单的方法是使用缩写函数返回连接的值...
<v-select
:items="items"
:item-text="item => `${item.moduleName} - ${item.moduleNum}`"
item-value="moduleId"
v-model="selection"
>
英文:
The simplest way is to use a shorthand function to return the concatenated values...
<v-select
:items="items"
:item-text="item=>`${item.moduleName} - ${item.moduleNum}`"
item-value="moduleId"
v-model="selection"
>
答案2
得分: 0
<v-select
:items="deplist"
item-value="moduleId"
v-model="selection"
>
{{ ${item.moduleName} - ${item.moduleNum} }}
</v-select>
使用这个 selection 插槽，当您选择一个值时，将显示插槽内的HTML。
英文:
You need to write a different value directly inside the slot available.
<v-select
:items="deplist"
item-value="moduleId"
v-model="selection"
>
<template v-slot:selection="{ item, index }">
{{ `${item.moduleName} - ${item.moduleNum}` }}
</template>
</v-select>
With this slot selection, when you select a value, this will display the html inside the slot.
答案3
得分: 0
item-text="moduleName+'-'+moduleNum"
英文:
You can simply write like following.
Please revert, if it works or not?
item-text="moduleName+'-'+moduleNum"
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论