如何强制Vuetify VTextField更新值？

问题分析 #

你遇到的核心问题是：当输入非数字字符时，过滤后的filtered值与之前的有效数字一致，导致display_value格式化后结果没有变化，Vue的响应式系统检测不到值变更，因此组件不会重渲染，输入的非数字字符会残留在输入框中。

演示问题：

另外你的代码还存在两个潜在问题：

• 当filtered为空字符串时，Number(filtered)会转为0，导致输入框显示0而非空值，不符合预期
• 使用@input事件不如Vuetify官方推荐的@update:value更贴合组件的v-model逻辑

解决方案 #

方案1：强制触发组件更新（简单直接） #

在设置display_value后，调用this.$forceUpdate()强制组件重渲染，确保输入框始终同步为格式化后的值：

<template>
  <v-text-field
    :value="display_value"
    @input="handleInput"
  ></v-text-field>
</template>
<script>
export default {
  data() {
    return {
      display_value: '',
    };
  },
  methods: {
    handleInput(value) {
      const filtered = this.onlyNumbers(value);
      this.$emit('input', filtered);
      
      // 处理空值情况，避免显示0
      this.display_value = filtered ? Number(filtered).toLocaleString() : '';
      
      // 强制组件重渲染
      this.$forceUpdate();
      
      console.log('input=', value);
      console.log('display_value=', this.display_value);
    },
    onlyNumbers(value) {
      return String(value).replace(/\D+/g, '');
    }
  }
}
</script>

方案2：使用计算属性+监听（更优雅的响应式实现） #

通过计算属性管理格式化后的值，配合监听原始输入值的变化，确保响应式系统能正确检测到变更：

<template>
  <v-text-field
    :value="formattedValue"
    @update:value="handleInput"
  ></v-text-field>
</template>
<script>
export default {
  data() {
    return {
      rawValue: '',
    };
  },
  computed: {
    formattedValue() {
      return this.rawValue ? Number(this.rawValue).toLocaleString() : '';
    }
  },
  methods: {
    handleInput(value) {
      const filtered = this.onlyNumbers(value);
      // 即使filtered和rawValue相同，也通过重新赋值触发响应式更新
      this.rawValue = filtered;
      this.$emit('input', filtered);
    },
    onlyNumbers(value) {
      return String(value).replace(/\D+/g, '');
    }
  }
}
</script>

关键优化点说明 #

• 处理空值：判断过滤后的字符串是否为空，避免将空值转为0显示
• 事件选择：使用@update:value替代@input，更符合Vuetify组件的v-model更新逻辑
• 响应式触发：方案2中通过给rawValue重新赋值，即使值相同，Vue的响应式系统也会检测到变更（因为字符串是原始类型，重新赋值会触发依赖更新）

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