Vue3+Vuetify3迁移：输入框事件触发时v-model报错求助

你的问题核心是错误地将v-text-field的v-model绑定到了方法上，Vuetify的v-text-field要求v-model绑定响应式数据（字符串/数字等），而非函数，这才触发了类型检查失败的警告。

错误原因拆解 #

Vue3中v-model是语法糖，对应组件的modelValue prop和update:modelValue事件。你把v-model="newField"中的newField写成了方法，导致v-text-field期望接收字符串类型的modelValue，实际却拿到了函数，自然抛出警告。

正确的迁移方案 #

方案1：保留原逻辑，继续使用@input监听（推荐，和Vue2逻辑完全一致）

Vuetify3的v-text-field依然支持@input事件监听，不需要强行改成v-model，直接沿用原写法即可：

<!-- ChildComponent.vue -->
<v-text-field
  @input="newField"
></v-text-field>

<script>
export default {
  methods: {
    newField($event) {
      this.$emit('field-change', {
        fieldName: this.field.fieldName,
        value: $event
      })
    }
  }
}
</script>

父组件代码无需修改，依然通过@field-change="handleFieldChange"接收事件。

方案2：如果需要子组件维护输入值，正确使用v-model

如果你确实需要子组件内部维护输入框的值，需要先定义响应式变量，再绑定v-model，最后监听变量变化触发事件：

<!-- ChildComponent.vue -->
<v-text-field
  v-model="inputValue"
></v-text-field>

<script>
export default {
  data() {
    return {
      inputValue: '' // 定义响应式变量绑定v-model
    }
  },
  watch: {
    // 监听输入值变化，触发自定义事件
    inputValue(newVal) {
      this.$emit('field-change', {
        fieldName: this.field.fieldName,
        value: newVal
      })
    }
  }
}
</script>

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