Vue2修改v-model后Vuetify1组件界面值未刷新问题排查

我用Vue 2和Vuetify 1开发组件，需求是让输入框始终显示值“1”，无论用户输入什么内容（此示例仅用于复现复杂场景中的问题）。我编写了如下代码：

<script>
export default {
  data() { return { v: null } },
  computed: {
    c: {
      get() { return this.v; },
      set(v) { this.v = "1"; }
    }
  }
};
</script>

<template>
  <v-text-field v-model="c" />
</template>

但代码未达到预期效果：用户输入的内容仍保留在输入框中。经排查，计算属性的setter已触发，data中的v值确实变为了“1”，但界面上的输入框值未更新。尝试过使用$set方法修改值，问题仍未解决。

问题根源 #

• Vue 2的响应式DOM更新采用异步队列机制：当你在计算属性的setter中修改this.v时，Vue不会立即更新DOM，而是把更新任务加入异步队列，等待当前同步代码执行完成后再处理。
• Vuetify 1的v-text-field在处理用户输入时，会同步更新输入框的DOM值，此时Vue的异步更新还未执行，导致输入框显示的是用户输入的内容，而非更新后的"1"。
• 你用$set是多余的：v是在data中初始声明的响应式数据，直接赋值本身就能触发响应式，问题不在数据的响应式绑定，而在于更新时机不匹配。

解决方案 #

方案1：直接让计算属性返回固定值（最简单，适合示例场景） #

既然需求是始终显示"1"，可以直接让计算属性的getter返回固定值，setter忽略用户输入即可：

<script>
export default {
  computed: {
    c: {
      get() { return "1"; },
      set() {} // 丢弃用户输入，不需要修改数据
    }
  }
};
</script>

<template>
  <v-text-field v-model="c" />
</template>

方案2：强制触发组件更新（适合依赖data的复杂场景） #

如果实际场景必须依赖data中的v值，可以在setter中调用$forceUpdate()强制组件重新渲染，确保视图同步：

<script>
export default {
  data() { return { v: "1" } }, // 初始值设为1，避免初始空值
  computed: {
    c: {
      get() { return this.v; },
      set() { 
        this.v = "1";
        // 强制组件重新渲染，同步最新的v值到视图
        this.$forceUpdate();
      }
    }
  }
};
</script>

<template>
  <v-text-field v-model="c" />
</template>

方案3：用watch替代计算属性（另一种实现思路） #

也可以直接绑定data到输入框，用watch监听输入值，强制重置为"1"：

<script>
export default {
  data() { return { v: "1" } },
  watch: {
    v(newVal) {
      if (newVal !== "1") {
        // 用$nextTick确保DOM更新完成后再重置
        this.$nextTick(() => {
          this.v = "1";
        });
      }
    }
  }
};
</script>

<template>
  <v-text-field v-model="v" />
</template>

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