Vue CLI：如何实现v-text-field联动计算且支持手动覆盖值？

要实现t3的自动计算/手动输入切换逻辑，你需要新增独立变量存储用户手动输入值，结合监听逻辑控制自动计算触发时机，具体修改如下：

修改后代码 #

<template>
  <v-text-field ref="t1" v-model.number="vText1" />
  <v-text-field ref="t2" v-model.number="vText2" />
  <v-text-field ref="t3" v-model="vText3" @input="handleT3Input" />
</template>

<script>
export default {
  data() {
    return {
      vText1: 0,
      vText2: 0,
      vText3: null // 存储t3的实际值，null标记未手动输入状态
    }
  },
  computed: {
    vTextC() {
      return this.vText1 + this.vText2
    }
  },
  watch: {
    // 监听t1/t2变化，仅当t3未手动输入时自动更新
    vText1() {
      if (this.vText3 === null || this.vText3 === '') {
        this.vText3 = this.vTextC.toString()
      }
    },
    vText2() {
      if (this.vText3 === null || this.vText3 === '') {
        this.vText3 = this.vTextC.toString()
      }
    }
  },
  methods: {
    handleT3Input(val) {
      // 用户清空输入时，恢复自动计算值
      if (val === '') {
        this.vText3 = this.vTextC.toString()
      }
    }
  },
  mounted() {
    // 初始化时设置t3为计算值
    this.vText3 = this.vTextC.toString()
  }
}
</script>

逻辑说明 #

• 新增vText3变量专门存储t3的实际显示值，初始null标记未手动输入状态。
• 给t1、t2添加v-model.number绑定，确保输入值转为数字类型，避免字符串拼接导致的计算错误。
• 监听t1、t2的变化：仅当t3未被手动输入（值为null或空字符串）时，自动更新t3为计算值。
• handleT3Input方法处理用户输入：清空t3时自动恢复计算值；输入有效内容则保留手动值，停止自动更新。
• 组件挂载时初始化t3为计算值，确保页面加载后显示正确初始结果。

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