How to make the second value optional on v-autocomplete(vuejs & vuetify)

Question

I have a v-autocomplete component on my template and I would like display data via item-text. The first value ${item.name} is will always be rendered but the second value ${item.faculty.name} comes from a nested relationship and I want to make it optional( if exist then display and if it null then display nothing). How can achieve it.

        <v-autocomplete
              v-model="form.classroom"
              :items="classrooms"
              :item-text="item => `${item.name} - ${item.faculty.name}`"
              item-value="id"
              :label="$t('GENERAL.ALL.CLASS_ROOM')"
              hide-selected
              clearable
              prepend-icon="mdi-chair-school"
              :error-messages="serverValidation.getMessage('classroom')"
           ></v-autocomplete>

The first value is displaying without problem.

use a computed value, it makes it easier to deal with if you put that logic into your js code. — Daniel
– Daniel, Commented Jun 23, 2020 at 21:48

Boussadjra Brahim · Accepted Answer · 2020-06-23 21:34:50Z

2

Try ternary operator condition?option1:option2 :

  :item-text="item => item.faculty?`${item.name} - ${item.faculty.name}`:item.name"

or

:item-text="item => `${item.name} ${item.faculty?' - '+item.faculty.name:''}`"

answered Jun 23, 2020 at 21:34

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

livreson ltc Over a year ago

Worked like a champ sir. Thanks a lot

Collectives™ on Stack Overflow

How to make the second value optional on v-autocomplete(vuejs & vuetify)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related