Vue表格中jQuery修改input值后v-model未更新的解决方法

核心原因 #

Vue的v-model依赖监听输入框的input/change事件同步数据，而jQuery直接调用$(input).val(newVal)修改DOM值时，不会触发这些事件，导致Vue无法感知值变化，进而出现数据不同步的情况。

方案一：抛弃jQuery，直接操作Vue响应式数据（推荐） #

遵循Vue数据驱动的设计思路，直接修改绑定的数据源，而非操作DOM。这种方式逻辑清晰，天然保证v-model同步。

示例代码如下：

<template>
  <b-table :items="tableItems" :fields="fields">
    <template #cell(field1)="{ item }">
      <b-form-input
        v-model.number="item.field1"
        type="number"
        @input="syncField2(item)"
        placeholder="百分比（如12）"
      />
    </template>
    <template #cell(field2)="{ item }">
      <b-form-input
        v-model.number="item.field2"
        type="number"
        @input="syncField1(item)"
        placeholder="金额（如12）"
      />
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      totalBudget: 100,
      fields: ['field1', 'field2'],
      tableItems: [
        { field1: 12, field2: 12 }
      ]
    }
  },
  methods: {
    syncField2(item) {
      // 百分比转金额：总预算 × 百分比/100，保留两位小数避免精度问题
      item.field2 = parseFloat((this.totalBudget * (item.field1 / 100)).toFixed(2))
    },
    syncField1(item) {
      // 金额转百分比：(金额/总预算)×100，保留两位小数
      item.field1 = parseFloat(((item.field2 / this.totalBudget) * 100).toFixed(2))
    }
  }
}
</script>

如果需要显示%或$符号，直接在模板中格式化即可，比如{{ item.field1 }}%、${{ item.field2 }}，不要将符号存入绑定的数值字段，避免类型错误。

方案二：保留jQuery时，手动触发input事件 #

若因特殊需求必须使用jQuery操作DOM，修改值后需手动触发input事件，让Vue感知到变化：

// 修改Field2输入框值后触发input事件
const $field2Input = $('.target-field2-input')
$field2Input.val(newValue)
$field2Input.trigger('input')

// 修改Field1输入框值后同理
const $field1Input = $('.target-field1-input')
$field1Input.val(newValue)
$field1Input.trigger('input')

此方式不推荐，容易引发DOM操作与响应式数据的不一致问题，违背Vue的设计理念。

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