如何解决TypeScript+Vue3+Vuetify中数字无法赋值给Readonly<any>类型问题

可能的原因及对应解决方法 #

1. 绑定的ref被设置为只读 #

如果创建ref时使用了readonly()包裹，比如：

const selected = readonly(ref(0))

这种情况下ref处于只读状态，v-select尝试赋值数字时就会触发"无法赋值给Readonly"的错误。

解决方法：去掉readonly()包裹，改用普通的ref定义：

const selected = ref(0) // 初始化数字类型，或根据需求设为undefined并指定类型

2. ref未指定正确的类型（TypeScript类型推断问题） #

如果ref未初始化，或者初始化类型与v-select返回的数字类型不匹配，TypeScript会推断出错误的类型，结合Volar的严格类型检查就会报错。比如：

const selected = ref() // 推断为Ref<undefined>

当v-select返回数字时，类型不匹配会触发错误。

解决方法：显式指定ref的类型：

// 允许初始为undefined，后续赋值数字
const selected = ref<number | undefined>(undefined)
// 或者直接初始化为数字
const selected = ref(0)

3. 直接绑定了只读的props变量 #

如果将v-model直接绑定到props传入的变量，由于props是只读的，也会触发该错误。比如：

<script setup>
const props = defineProps<{
  selectedValue: number
}>()
</script>

<template>
  <v-select v-model="props.selectedValue" /> <!-- 错误：props只读 -->
</template>

解决方法：使用computed的get/set包装props，通过emit更新父组件的值：

<script setup>
const props = defineProps<{
  modelValue: number
}>()
const emit = defineEmits(['update:modelValue'])

const selected = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <v-select v-model="selected" />
</template>

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