Vue中b-editable-table编辑后返回旧值问题求助

我是Vue框架新手，使用b-editable-table组件时遇到问题：编辑完成后，模型没有返回当前修改的值，而是旧值。

组件代码 #

<b-editable-table disableDefaultEdit
                  :rowUpdate="rowUpdate"
                  :editMode="'row'"
                  bordered
                  class="editable-table"
                  v-model="items"
                  :fields="fields"
                  striped>
    <template #cell(edit)="data">
        <div v-if="data.isEdit">
            <BIconX class="edit-icon" @click="handleSubmit(data, false)"></BIconX>
            <BIconCheck class="edit-icon"
                        @click="handleSubmit(data, true)"></BIconCheck>
        </div>
        <BIconPencil v-else
                     class="edit-icon"
                     @click="handleEdit(data, true)"></BIconPencil>
    </template>
    <template #cell(delete)="data">
        <BIconTrash class="remove-icon"
                    @click="handleDelete(data)"></BIconTrash>
    </template>
</b-editable-table>

handleSubmit方法代码 #

const handleSubmit = (data, isValid) => {
  if (isValid) {
    console.log(data.item.productPrice);
    // 提交逻辑
  }
  data.cancelEdit();
};

现象 #

修改productPrice为11.63后，通过console.log(data.item.productPrice)输出的却是旧值11.25。

解决办法 #

• 先同步编辑值再获取
  因为开启了disableDefaultEdit禁用默认编辑逻辑，编辑框的修改不会自动同步到data.item，必须手动调用data.update()完成同步：

const handleSubmit = (data, isValid) => {
  if (isValid) {
    data.update(); // 同步编辑值到模型
    console.log(data.item.productPrice); // 此时输出修改后的值11.63
    // 执行提交操作
  }
  data.cancelEdit();
};

• 核对字段配置
  确保fields中productPrice字段设置为可编辑：

const fields = [
  // 其他字段配置
  { key: 'productPrice', label: '产品价格', editable: true, type: 'number' }
];

• 确保rowUpdate方法正确更新数据
  自定义的rowUpdate方法需要正确替换数组中的旧数据，保证v-model绑定的items同步更新：

const rowUpdate = (newRow, oldRow) => {
  const idx = items.value.findIndex(item => item.id === oldRow.id);
  if (idx !== -1) {
    items.value[idx] = { ...newRow };
  }
  return true;
};

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