Vue3项目中input同时使用v-model和:value后v-model无法访问如何解决

问题原因 #

1. v-model 与 :value 绑定冲突
   v-model 是 Vue 的内置语法糖，对原生输入框组件而言，它等价于同时绑定 :value="变量" + 监听 @input 事件更新变量值。你在同一个输入框上同时手动声明 :value 属性，会覆盖 v-model 自带的值绑定逻辑，两者冲突导致 v-model 绑定的 staff['all_total'] 读写异常。

2. all_total 字段响应式丢失
   移除 :value 后仍无法正常访问绑定值，基本都是响应式丢失导致：如果你使用的是 Vue2 版本，staff 对象初始化时没有提前声明 all_total 字段，后续直接给 staff 新增该属性时，Vue 无法对这个新增属性做响应式劫持，就会出现读写不生效、状态变化无法被监听的问题。

修复方案 #

• 第一步：删除输入框上手动声明的 :value 属性，禁止与 v-model 同时绑定在同一个输入组件上
• 第二步：修复响应式问题：
  • 初始化 staff 对象时提前声明 all_total: 0 字段
  • 如果是运行时才需要新增该字段，Vue2 项目需调用 this.$set(this.staff, 'all_total', 计算后的值) 完成响应式赋值
• 第三步：把多字段求和逻辑放在监听函数中，相关字段变化时自动更新 all_total，示例代码如下：

watch: {
  'staff.salary': 'calcAllTotal',
  'staff.overtime': 'calcAllTotal',
  'staff.educational': 'calcAllTotal',
  'staff.finance': 'calcAllTotal',
  'staff.macul': 'calcAllTotal',
},
methods: {
  calcAllTotal() {
    this.staff.all_total = Number(this.staff.salary || 0) 
      + Number(this.staff.overtime || 0) 
      + Number(this.staff.educational || 0) 
      + Number(this.staff.finance || 0) 
      + Number(this.staff.macul || 0)
  }
}

• 第四步：输入框仅保留 v-model 绑定即可：

<input type="text" class="sc table-input" v-model="staff.all_total" />

如果 all_total 不需要支持用户手动修改，可额外添加 readonly 属性避免值被误改。

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