Getting object with v-select in Vue 3

Hello everybody,

I store objects and this objects I want to display as selection with v-select. If I open the selection window I get the error message:
[Vue warn]: Invalid VNode type: undefined (undefined)
at
at <VListItem key=4 title= {id: ‘34d67b9c-c3d4-43e3-b2cb-0b04c63a84b8’, name: ‘Hallo Welt 2’, otherActivity: false, projects: Array(0)} value= {id: ‘34d67b9c-c3d4-43e3-b2cb-0b04c63a84b8’, name: ‘Hallo Welt 2’, otherActivity: false, projects: Array(0)} … >
at
at <VList ref=Ref< Proxy {…} > selected= [’’] selectStrategy=“single-independent” … >
at
at <BaseTransition onBeforeEnter=fn onEnter=fn onAfterEnter=fn … >

With Vue 2 it is possible to get the objects with the item-text="name" prop. Vue 3 does not support this property. So my question is how to get the object and show this in Vue 3 in a selection box.

My template code looks like this:

              <v-form v-model="newCustomerValid">

                <v-container>

                  <v-select

                    v-model="selectCustomer"

                    :items="customers"

                    item-value="id"

                    return-object

                    label="Customer"

                    required

                  ></v-select>

                  <v-text-field

                    v-model="newProject"

                    :rules="nameRules"

                    :counter="20"

                    label="New Project"

                    required

                    >

                  </v-text-field>

                </v-container>

                  <v-card-actions>

                    <v-spacer></v-spacer>

                    <v-btn color="primary" @click="addNewProject()" :disabled="!this.newProjectValid && selectCustomer == ''">

                      Save

                    </v-btn>

                  </v-card-actions>

              </v-form>

            </v-window-item>

Hello @Mpug_9 ,
Can you please inform the version of vuetify which you have used?

5 Likes

Hi @AddWeb_2012. Thanks for your reply. I found a solution myself. After removing the return-object attribute the error disappears.