Vuetify v-select组件初始值不显示问题排查与解决

这个问题我之前也碰到过，本质就是数据类型不匹配导致的严格相等校验失败！

Vuetify的v-select在匹配选中值和选项列表时，用的是严格相等运算符（===）。你通过props传入的initLevel大概率是字符串类型，但你的levels数组是数字类型的数组——比如父组件如果直接写<your-component initLevel="25">，那initLevel就是字符串"25"，而levels里的项是数字25，这时候"25" === 25结果是false，v-select找不到对应的选项，自然就不会显示初始值。

但你直接用常量25初始化level时，它是数字类型，和levels里的项类型完全一致，匹配成功，所以就能正常显示啦。

根据你的场景，有两种靠谱的解决思路：

1. 让父组件传数字类型的initLevel #

在父组件传值时，记得加冒号（动态绑定），这样就能传递数字而不是字符串：

<!-- 父组件代码 -->
<your-component :initLevel="25"></your-component>

这样initLevel会以数字类型传给子组件，和levels的项类型一致，就能正常匹配显示初始值了。

2. 在子组件里把initLevel转成数字 #

如果父组件的传值方式没法改（比如initLevel是后端返回的字符串，或者来自其他固定场景），那就在子组件初始化时手动转成数字：

<script>
export default {
  props: ['initLevel'],
  data () {
    return {
      levels: [10, 25, 50, 75], // 假设你的数字数组是这类数字
      // 把initLevel转为数字类型
      level: Number(this.initLevel)
    }
  }
}
</script>

要是担心initLevel可能是null或者非数字格式，还可以加个容错处理：

level: this.initLevel !== null && !isNaN(Number(this.initLevel)) ? Number(this.initLevel) : 25 // 25作为默认 fallback 值

额外小技巧：用watch监听initLevel变化 #

如果initLevel可能在组件运行过程中被父组件修改，建议加个watch来同步更新level，同时保证类型正确：

watch: {
  initLevel(newVal) {
    this.level = Number(newVal);
  }
}

内容的提问来源于stack exchange，提问作者Jerry Lynn