Vuetify 选择组件初始值问题

Posted 2023-02-22

【中文标题】Vuetify 选择组件初始值问题

【英文标题】：Vuetify Select Component Initial Value issue

【发布时间】：2018-07-08 01:27:25

【问题描述】：

我有 vuetify webpack 项目

在我的一个 vue 组件中，我使用 v-select 并将 :items 设置为名为“级别”的通用数字数组，并将 v-model 设置为包含通用数字的数据属性“级别”

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

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

这不正确，但是：

...
level: 25
...

工作正常

v-select 用法是：

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

除了在启动问题时显示初始值，v-select 工作正常

那么如何解决这个问题，是什么原因造成的呢？

【问题讨论】：

您使用的是 Vue 2.0 还是 Vue 1.0？

@d3L 2.0 cuz vuetify 不适用于 vue 1.0 afaik

不，我使用现代 vue 和 vuetify

但您收到错误 w.r.t.变异道具不是吗？

不明白你的意思。当 v-select 尝试初始化自身时，看起来数据对象还没有准备好

【参考方案1】：

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

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

props: ['initLevel'],

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

beforeMount() 
     this.level = this.initLevel

【讨论】：

我试过了，很奇怪，但还是一样的故事：如果在beforeMount()中this.level = 20，那么ok，如果this.level = this.initLevel，那么v-select没有初始值

和普通的 html 选择初始化很好

【参考方案2】：

好的，我发现了问题 它在类型中：levels 是一个整数数组，而 prop 是字符串 标准的 html select 没有问题，但是 v-select 有问题！

【讨论】：

我遇到了同样的问题。原来我的 API 的结果是一个字符串，而我的 items 数组的值是 int...

救命稻草！

这让我难过了一阵子。我以为我要疯了！