如何在v-select的item-text中连接两个字段 vuetify

huangapple go评论94阅读模式
英文:

How to concatenate two fields in v-select's item-text vuetify

问题

Using vue2.6, vuetify 2.3,我有一个v-select菜单,其中包含一些模块名称,对于item-text,我想从显示单个值更改为将两个字段组合在一起,用连字符连接。

目前,我将item-text设置为仅显示来自我的数据库的模块名称。

  1. <v-select
  2. :items="deplist"
  3. item-text="moduleName"
  4. item-value="moduleId"
  5. v-model="selection"
  6. ></v-select>

我想通过在item-text内部连接两个字段(moduleName,moduleNum)并在它们之间使用连字符来更改item-text组件。我可以如何做到这一点?

  1. item-text="moduleName + '-' + moduleNum"
  2. 例如: "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.

  1. &lt;v-select
  2. :items=&quot;deplist&quot;
  3. item-text=&quot;moduleName&quot;
  4. item-value=&quot;moduleId&quot;
  5. v-model=&quot;selection&quot;
  6. &gt;&lt;/v-select&gt;

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?

  1. item-text=&quot;moduleName&quot; + &quot;-&quot; + &quot;moduleNum&quot;
  2. ex: &quot;Mathematics-108&quot;

答案1

得分: 1

最简单的方法是使用缩写函数返回连接的值...

  1. <v-select
  2. :items="items"
  3. :item-text="item => `${item.moduleName} - ${item.moduleNum}`"
  4. item-value="moduleId"
  5. v-model="selection"
  6. >

示例

英文:

The simplest way is to use a shorthand function to return the concatenated values...

  1. &lt;v-select
  2. :items=&quot;items&quot;
  3. :item-text=&quot;item=&gt;`${item.moduleName} - ${item.moduleNum}`&quot;
  4. item-value=&quot;moduleId&quot;
  5. v-model=&quot;selection&quot;
  6. &gt;

Demo

答案2

得分: 0

<v-select
:items="deplist"
item-value="moduleId"
v-model="selection"
>

</v-select>

使用这个 selection 插槽,当您选择一个值时,将显示插槽内的HTML。

英文:

You need to write a different value directly inside the slot available.

  1. &lt;v-select
  2. :items=&quot;deplist&quot;
  3. item-value=&quot;moduleId&quot;
  4. v-model=&quot;selection&quot;
  5. &gt;
  6. &lt;template v-slot:selection=&quot;{ item, index }&quot;&gt;
  7. {{ `${item.moduleName} - ${item.moduleNum}` }}
  8. &lt;/template&gt;
  9. &lt;/v-select&gt;

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?

  1. item-text=&quot;moduleName+&#39;-&#39;+moduleNum&quot;

huangapple
  • 本文由 发表于 2023年5月22日 23:12:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76307598.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定