CODEWITHSUNDEEP
vue.jsvuetify.jsv-select
Jerry Lynn
Jerry Lynn

Reputation: 151

Vuetify Select Component Initial Value issue

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?

Upvotes: 3

Views: 6953

Answers (2)

Jerry Lynn
Jerry Lynn

Reputation: 151

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!

Upvotes: 9

Marco
Marco

Reputation: 7271

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
}

Upvotes: 0

Related Questions