Проблема с начальным значением Vuetify Select Component

У меня есть проект vuetify webpack

В одном из моих компонентов vue я использую v-select, где: items установлен на общий массив чисел с именем «уровни», а v-модель установлена ​​на свойство данных «уровень», которое содержит общее число.

Таким образом, проблема в том, что 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 отлично работает

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


vue.js vuetify.js v-select
person Jerry Lynn    schedule 29.01.2018    source источник
comment
Вы используете Vue 2.0 или Vue 1.0?   -  person marco-a    schedule 29.01.2018
comment
@ d3L 2.0 cuz vuetify не работает с vue 1.0 afaik   -  person Traxo    schedule 29.01.2018
comment
нет, я использую современные vue и vuetify   -  person Jerry Lynn    schedule 29.01.2018
comment
но вы получаете ошибку w.r.t. мутирующий реквизит, не так ли?   -  person Traxo    schedule 29.01.2018
comment
не понимаю, что ты имеешь в виду. похоже, что объект данных не готов, когда v-select пытается инициализировать себя   -  person Jerry Lynn    schedule 29.01.2018

Ответы (2)


arrow_upward
7
arrow_downward

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

person Jerry Lynn    schedule 29.01.2018
comment
У меня такая же проблема. Оказалось, что результатом моего API была строка, а мой массив элементов имел int для значений ... - person Boyan; 29.01.2019
comment
Спасатель, спасибо! - person opHASnoNAME; 15.11.2019
comment
Это поставило меня в тупик на какое-то время. Я думал, что схожу с ума! - person MitchBroadhead; 11.04.2020

arrow_upward
0
arrow_downward

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

Вы можете попробовать переместить инициализацию с data() на beforeMount() следующим образом:

props: ['initLevel'],

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

beforeMount() {
     this.level = this.initLevel
}
person marco-a    schedule 29.01.2018
comment
Я попробовал, и это странно, но все та же история: если в beforeMount () this.level = 20, то нормально, а если this.level = this.initLevel, то v-select не имеет начального значения - person Jerry Lynn; 29.01.2018
comment
и нормальный выбор html инициализирует нормально - person Jerry Lynn; 29.01.2018