Vuetify Select Component Initial Value issue

Question

I have vuetify webpack project

In one of my vue components I use v-select with :items set to common array of numbers named 'levels', and v-model set to data property 'level' that holds common number

So the issue is that v-select doesn't show initial value at startup if 'level' is initialized with prop - and shows ok if 'level' is initialized by constant. Smth like this:

  props: ['initLevel'],
  data () {
    return {
      levels,
      level: this.initLevel
    }
  }

this isn't working correct, but this:

...
level: 25
...

works fine

v-select usage is:

         <v-select
            label="Select Level"
            :items="levels"
            v-model="level"
            max-height="200"
            dense
            autocomplete
          >
        </v-select>

Besides initial value showing at startup problem, v-select works fine

So how to solve this problem and what's the reason of it?

don't understand what you mean. it looks like data object isn't ready when v-select tries to initialize itself — Jerry Lynn, Jan 29 '18 at 15:19

score 9 · Accepted Answer · answered Jan 29 '18 at 15:32

9

Ok I found the problem it was in types: levels is an array of ints, and prop went as string standard html select had no problem with it, but v-select had!

answered Jan 29 '18 at 15:32

Jerry Lynn

151
1
7

I had the same problem. Turned out the result from my API was a string and my items array had int for values... – Boyan Jan 29 '19 at 19:00
Lifesaver thanx! – opHASnoNAME Nov 15 '19 at 16:15
This had me stumped for a while. I thought I was going crazy! – MitchBroadhead Apr 11 '20 at 16:00

score 0 · Answer 2 · answered Jan 29 '18 at 11:18

0

I think data() is called before any of the property values are available.

What you can try is moving the initialisation from data() to beforeMount() like this:

props: ['initLevel'],

data() {
    return {
        levels: ...,
        level: 0
    }
},

beforeMount() {
     this.level = this.initLevel
}

answered Jan 29 '18 at 11:18

Marco

7,007
2
19
49

I tried it and it's strange but still the same story: if in beforeMount() this.level = 20, then ok, and if this.level = this.initLevel, then v-select has no initial value – Jerry Lynn Jan 29 '18 at 15:24
and normal html select initializes fine – Jerry Lynn Jan 29 '18 at 15:25

Vuetify Select Component Initial Value issue

2 Answers2