Vue.js中点击单选框后v-text-field赋值null仍显示旧值的问题

问题代码 #

模板部分：

<v-radio-group row v-model="fields.destination" @change="changeDestination">
  <v-radio>.....</v-radio>
</v-radio-group>
<v-text-field v-model="fields.name"></v-text-field>

函数部分：

changeDestination(){ 
  this.fields.name = null;
  console.log(this.fields.name) 
}

原因 #

控制台输出null但输入框未更新，核心是Vue的响应式依赖未触发，大概率是以下两种情况：

1. fields对象初始化时未提前声明name属性，Vue 2无法对后续新增的属性建立响应式监听，导致修改name为null时，视图层无法感知变化。
2. 如果fields是后续动态赋值的对象（比如接口请求后才赋值），Vue也无法自动监听该对象内部属性的变更。

解决方法 #

方法1：提前声明响应式属性（推荐）

在组件data中初始化fields时，提前添加name属性，让Vue从一开始就监听该属性：

data() {
  return {
    fields: {
      destination: '',
      name: '' // 提前声明以确保响应式
    }
  }
}

后续直接修改this.fields.name = null时，视图会自动同步更新。

方法2：用Vue.set强制触发响应式（针对动态属性）

如果无法提前声明name，可以使用Vue提供的$set方法修改属性，强制触发响应式更新：

changeDestination(){ 
  this.$set(this.fields, 'name', null);
  console.log(this.fields.name) 
}

若使用Vue 3，由于底层用Proxy代理对象，直接赋值即可触发视图更新，不会出现此类问题。

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