<template>
    <v-select
      v-model="selectedCustomerId"
      :items="customerOptions"
      item-text="name"
      item-value="id"
      label="Select Customer"
      outlined
    ></v-select>
  </template>
  
<script lang="ts">
import { defineComponent } from 'vue';
import { type Customers } from '../utils/types';
import apiService from '@/utils/apiService';
  
export default defineComponent({
    data() {
      return {
        customerOptions: [] as Customers[],
        selectedCustomerId: null as number | null,
      };
    },
    async mounted() {
      await this.fetchCustomerData();
    },
    methods: {
      async fetchCustomerData() {
        try {
            const response = await apiService.get<Customers[]>("API/URI");
            this.customerOptions = response;
        } catch (error) {
          console.error('Error fetching customer data:', error);
        }
      },
    },
  });
  </script>

Hi, im trying to create an dropdown using v-select with vuetify, but when i'm trying to populate the dropdown with the data i fetch from an api it throws in the console this message: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')

I'm pretty new to vue 3 and vuetify.

EDIT: I think my problems is that this.customerOptions bees a proxy object, and when i'm trying to use it in the v-select i get errors. What am im doing wrong?

<template>
    <v-select
      v-model="selectedCustomerId"
      :items="customerOptions"
      item-text="name"
      item-value="id"
      label="Select Customer"
      outlined
    ></v-select>
  </template>
  
<script lang="ts">
import { defineComponent } from 'vue';
import { type Customers } from '../utils/types';
import apiService from '@/utils/apiService';
  
export default defineComponent({
    data() {
      return {
        customerOptions: [] as Customers[],
        selectedCustomerId: null as number | null,
      };
    },
    async mounted() {
      await this.fetchCustomerData();
    },
    methods: {
      async fetchCustomerData() {
        try {
            const response = await apiService.get<Customers[]>("API/URI");
            this.customerOptions = response;
        } catch (error) {
          console.error('Error fetching customer data:', error);
        }
      },
    },
  });
  </script>

Hi, im trying to create an dropdown using v-select with vuetify, but when i'm trying to populate the dropdown with the data i fetch from an api it throws in the console this message: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')

I'm pretty new to vue 3 and vuetify.

EDIT: I think my problems is that this.customerOptions bees a proxy object, and when i'm trying to use it in the v-select i get errors. What am im doing wrong?

• javascript
• vuejs3
• vuetify.js

Share Improve this question Follow edited May 25, 2023 at 5:56 byteArrayJake asked May 23, 2023 at 11:41 byteArrayJakebyteArrayJake 11133 silver badges1212 bronze badges 4

• 1 Does it work when you remove the async and await keywords from the mounted()? – Moritz Ringler Commented May 23, 2023 at 15:01
• @MoritzRingler No, but in the v-select i can now see [object Object].. hmm i think it might be a problem that the object bees a "Proxy" after the API call? – byteArrayJake Commented May 23, 2023 at 15:08
• Do you have any answer? I met thi issue as well. – JackChouMine Commented Jun 30, 2023 at 9:16
• Unfortunately not, I chosed a regular select instead. Please let me know if you find a solution @JackChouMine – byteArrayJake Commented Jun 30, 2023 at 11:21

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

FYI: I was getting the same error using Vuetify on Nuxt 3. I got this error when closing v-selects:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')

I worked out that this error was caused by erroneous key value used on the VNodes rendered by VSelect. VSelect uses the item-title for the key value, but my items had some entries without titles. I.e. key on the respective VNode would be blank or undefined. Ensuring every item had a title resolved the issue entirely.

Hope this helps!

Got the same issue using Vuetify 3 + Nuxt. The issue was I used <v-list-item-title> and not the :title attribute

Doesn't work:

                <v-select
                :model-value="object"
                :items="items"
                item-props
              >
                <!-- Other stuff -->
                  <v-list-item :key="freebet.id" class="select-type" v-bind="props">
                    <v-list-item-title>
                      {{ item.title}}
                    </v-list-item-title>
                  </v-list-item>
                <!-- Other stuff -->
              </v-select>

Work:

                <v-select
                :model-value="object"
                :items="items"
                item-props
              >
                <!-- Other stuff -->
                  <v-list-item 
                   :key="freebet.id"
                   class="select-type"
                   v-bind="props"
                   :title="item.title"> <= Add :title here
                  </v-list-item>
                <!-- Other stuff -->
              </v-select>

=> I guess it's a Vuetify issue

You Must Be Use item-title For name And item-value For Your Object Id Like This code:

<template>
     <v-select
          :items="departmentOptions"
          item-title="name"
          item-value="id"
          @update:model-value="getItems"
          label="your Label"
          variant="solo"
          required
          reverse
          class="text-field"
   ></v-select>
</template>

<script>
import { defineComponent } from "vue";
import axios from "axios";
export default defineComponent({
  data: () => ({
   
    departmentOptions: [],
    selectedDepartmentId: "",
   
  }),
  methods: {
    getItems(item) {
       console.log(item);
      this.selectedDepartmentId = item;
    }
  },
  mounted() {
    axios
      .get("/Your Api")
      .then((response) => {
        this.departmentOptions = response.data;
        console.log(response.data);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  },
});
</script>

<!-- Error 1: due to entering the wrong key for item-title -->
    <v-select
      variant="outlined"
      :items="[{ id: 1, title: 'aaa' }]"
      item-title="name"
      item-value="id"
    ></v-select>
    <!-- Error 2: due to undefined item-title value -->
    <v-select
      variant="outlined"
      :items="[{ id: 1, title: undefined }]"
      item-title="title"
      item-value="id"
    ></v-select>

For me it was some :title and :subtitle attributes (thanks @Kinco) and an issue with the v-text attribute as well. To summarize:

INVALID:

<v-toolbar-title
  v-text="header" />

WORKING:

<v-toolbar-title>
  {{ header }}
</v-toolbar-title>

Using Node 22.9.0 (runtime) and Bun 1.1.20 (builder).