vuetify v-select not loading data from array

Question

in VPlay I added this code:

<template>
    <v-app>
        <v-container>
            <v-select
                v-model="selectedState"
                :items="states"
                item-value="value"
                item-text="text"
                label="State"
                outlined
            ></v-select>
        </v-container>
    </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const selectedState = ref('')
  const states = ref([
    { value: '1', text: 'VIC' },
    { value: '2', text: 'ACT' },
  ])
</script>

The select drop down has the two objects and not the value/text pairs as expected.

I also get a warning: Invalid prop: type check failed for prop "title". Expected String | Number | Boolean, got Object

I am a novice with Vuetify. What am I missing here? What am i doing wrong?

My intent is to get data from supabase via Pinia and create a select element in a form.

item-text is for vuetify2, -And for vuetify3, it uses item-title. — Keyboard Corporation
– Keyboard Corporation, Commented Apr 21 at 3:12

fOURP · Accepted Answer · 2025-04-19 16:06:28Z

2

You are close but instead of

 item-text="text"

you actually need

item-title="text"

also item-value="value" is not necessary. v-select automatically gets value and title. So if your object had title instead of text for example it would work out of the box.

v-select docs

answered Apr 19 at 16:06

fOURP

4434 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

vuetify v-select not loading data from array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related