Vuetify Select Component Initial Value issue

2
votes

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?

2
vue.jsvuetify.jsv-select
Are you using Vue 2.0 or Vue 1.0? – marco-a
@d3L 2.0 cuz vuetify doesn't work with vue 1.0 afaik – Traxo
no, I use modern vue & vuetify – Jerry Lynn
but you are getting error w.r.t. mutating props aren't you? – Traxo
don't understand what you mean. it looks like data object isn't ready when v-select tries to initialize itself – Jerry Lynn

2 Answers

7
votes

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!

0
votes

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
}