CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Cornel Verster
Cornel Verster

Reputation: 1783

How can I capitalize the first letter of item-text for a combobox?

I have a bunch of objects that I use as items in a Vuetify combobox:

*availableCities*:
{
    created_at:null,
    id:1,
    name:"sandton",
    province_id:1,
    updated_at:null,
},
{
    created_at:null,
    name:"johannesburg"
    ...
}

I then use these as selectables in a v-combobox:

<v-combobox
    :items="availableCities"
    item-text="name"
    label="City"
    ...
></v-combobox>

I want to capitalize the name of each city when being displayed in the combobox for selection, without changing its value in the object. How can I do that?

Upvotes: 1

Views: 681

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could use the item slot :

<v-combobox
    :items="availableCities"
    item-text="name"
    label="City"
    ...
>
<template v-slot:item="{item}">
  {{item.name.charAt(0).toUpperCase() + item.name.slice(1)}}
</template>
</v-combobox>

Upvotes: 3

Thomas Kuhlmann
Thomas Kuhlmann

Reputation: 1003

the property item-text can be a string, variable or a function

So for your purpose, you can replace your item-text with

:item-text="item=>item.name.charAt(0).toUpperCase() + item.name.slice(1)"

or create a method

:item-text="text"

methods:{
   text(item){ 
     return item.name.charAt(0).toUpperCase() + item.name.slice(1) 
   }

Upvotes: 3

Related Questions