Vuetify Select 组件初始值问题

Question

我有 vuetify webpack 项目

在我的一个 vue 组件中，我使用 v-select 并将 :items 设置为名为 'levels' 的通用数字数组，并将 v-model 设置为数据属性 'level' 持有公共号码

所以问题是，如果 'level' 是用 prop 初始化的，v-select 在启动时不显示初始值 - 如果 'level' 是用常量初始化的，则显示 ok。像这样：

  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

我认为 data() 在任何属性值可用之前被调用。

您可以尝试将初始化从 data() 移动到 beforeMount()，如下所示：

props: ['initLevel'],

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

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

Answer 2

好的，我找到问题了它在类型中：级别是一个整数数组，prop 是字符串 standard html select 没有问题，但是 v-select 有！

Vuetify Select 组件初始值问题

Vuetify Select Component Initial Value issue

vue.js

vuetify.js

v-select