Vuetify Select Component Начальная проблема проблема

Question

У меня есть проект Vuetify Webpack

В одном из моих компонентов vue я использую v-select with: элементы, для которых задан общий массив чисел с именем 'level', и для v-модели, установленной для свойства данных 'level', которое содержит общее число

Таким образом, проблема в том, что v-select не показывает начальное значение при запуске, если "level" инициализируется с помощью prop - и показывает "хорошо", если "level" инициализируется константой. Что-то вроде этого:

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

это не работает правильно, но это:

...
level: 25
...

работает отлично

Использование v-select:

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

Помимо начального значения при запуске, v-select работает нормально

Так как решить эту проблему и в чем причина?

Answer 1

Хорошо, я обнаружил, что проблема была в типах: level - это массив целых чисел, и prop пошел как строковый стандарт html select не имел проблем с этим, но v-select имел!

Answer 2

Я думаю data() вызывается до того, как доступно любое из значений свойства.

То, что вы можете попробовать, это перенести инициализацию из data() в beforeMount() как это:

props: ['initLevel'],

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

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