Vuetify v-text-field输入有值时ref获取value返回null的问题

• Vuetify的输入类组件与原生HTML输入框的数据流逻辑存在本质区别，认知偏差来自两个常见的使用误区：
  • 绑定:value属性后，组件会自动将用户输入内容回写到该绑定值上：实际上:value仅作为一次性初始值传入通道，用户输入只会触发组件内部状态变更，不会反向修改传入的value属性。
  • 通过ref获取的组件实例上的value属性就是用户实时输入的内容：实际上ref拿到的是组件对外暴露的props集合，存储的全是父组件传入的初始值，用户输入的实时内容保存在组件内部状态中，不会直接暴露在实例的value属性上。

• Vuetify所有输入类组件的双向绑定必须使用v-model指令，这是框架官方设计的合法数据通道。
• 禁止通过ref读取组件内部输入值，直接读取v-model绑定的data变量即可，完全符合Vue单向数据流规范，也能保证框架版本迭代时的代码兼容性。

1. 在组件的data中新增两个响应式变量，分别对应两个输入组件的绑定值：

data () {
  return {
    hasSaved: false,
    isEditing: null,
    // 新增绑定变量，保留原有初始值逻辑
    rowCount: 2,
    columnType: null,
    states: [
      { name: 'Single', abbr: 'S', id: 1 },
      { name: 'Double', abbr: 'D', id: 2 },
      { name: 'Triple', abbr: 'T', id: 3 },
      { name: 'Custom', abbr: 'C', id: 0 },
    ],
  }
}

2. 修改模板中的输入组件，将原有:value绑定替换为v-model，移除冗余的ref引用：

<v-text-field
  :disabled="!isEditing"
  v-model="rowCount"
  autofocus
  color="white"
  label="Number of Rows"
></v-text-field>

<v-autocomplete
  :disabled="!isEditing"
  :items="states"
  :filter="customFilter"
  color="white"
  item-text="name"
  label="Number of Columns"
  v-model="columnType"
></v-autocomplete>

3. 修改save方法，直接读取绑定的data变量即可，无需通过ref取值：

save () {
  this.isEditing = !this.isEditing
  this.hasSaved = true
  // 直接读取响应式变量即可获取实时输入值
  console.log('行数输入值：', this.rowCount)
  console.log('列类型选中值：', this.columnType)
}

• 通过ref访问Vuetify组件内部状态取输入值属于反模式写法，会在框架版本迭代时因内部实现变动出现兼容问题，不建议使用。
• v-model的底层原理是组件监听内部输入事件，主动触发update:modelValue事件将用户输入同步回父组件，这是唯一被框架官方保障的输入值回传通道。

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