CODEWITHSUNDEEP
vue.jsvuetify.js
Manuel Carrero
Manuel Carrero

Reputation: 637

How to concatenate two fields in v-autocomplete item-text vuetify

I'm looking for a way to concatenate two fields in a v-autocomplete item-text field,

This is my code:

            <ol>
              <li>
                  <v-autocomplete
                    placeholder="Search a person"
                    prepend-inner-icon="mdi-magnify"
                    chips
                    clearable
                    dense
                    v-model="counterpart1"
                    item-value="id"
                    item-text="first_value"
                    :items="enrolled1"
                  />
              </li>
            </ol>

I expect something like this:

            <ol>
              <li>
                  <v-autocomplete
                    placeholder="Search a person"
                    prepend-inner-icon="mdi-magnify"
                    chips
                    clearable
                    dense
                    v-model="counterpart1"
                    item-value="id"
                    item-text="first_value + second_value"
                    :items="enrolled1"
                  />
              </li>
            </ol>

I tried this:

item-text="first_value + second_value"

And this:

:item-text="`${first_value}, ${second_value}`"

But I got [object Object]. I found this similar question but I think my case is a bit difference and I can't understand, how to change it in that way.

Any help will be appreciated

Upvotes: 3

Views: 4856

Answers (2)

Lameck Meshack
Lameck Meshack

Reputation: 6993

item-text can accept a function

:item-text="item => `${item.first_value} ${item.second_value}`"

The first answer is correct however you can use this if you do not want to declare another function

Upvotes: 4

jrcamatog
jrcamatog

Reputation: 1494

Use a function to render the item-text.

:item-text="getItemText"

Then, in your methods:

getItemText(item) {
    return `${item.first_value} ${item.second_value}`;
}

Upvotes: 16

Related Questions