Vue3如何将字符串表单值转为指定对象通过axios patch提交

1. 修复输入框值同步问题 #

你当前使用的:value是单向绑定，用户输入的修改内容不会自动同步到数据源，首先要调整绑定逻辑，确保能拿到最新编辑值。
由于userList是props传入的，直接修改会触发Vue单向数据流警告，建议先在组件内初始化一份本地数据源副本，所有渲染、编辑操作基于副本进行：

// Vue3 组合式API写法，选项式API直接把副本定义在data中即可
import { ref } from 'vue'
const props = defineProps(['userList'])
// 生成本地可修改的列表副本
const localUserList = ref([...props.userList])

模板里的循环改为遍历本地副本，输入框用v-model双向绑定对应字段，以nationalCode字段为例，其他字段写法一致：

<template>
  <tr v-for="(user , index) in localUserList" :key="user.id"> <!-- 优先用用户唯一id当key，不要用index -->
    <!-- 其他单元格 -->
    <td>
      <input 
        type="text" 
        class="text-xs text-secondary mb-0 text-center border-0 bg-white w-100 p-1"
        :disabled="!user.disabled"
        v-model="user.nationalCode"
      >
    </td>
    <td>
      <input 
        type="text" 
        class="text-xs text-secondary mb-0 text-center border-0 bg-white w-100 p-1"
        :disabled="!user.disabled"
        v-model="user.username"
      >
    </td>
    <!-- 其余邮箱、手机号等字段输入框按相同规则绑定 -->
  </tr>
</template>

提示：v-for的key建议使用用户唯一id，不要用遍历index，避免列表排序、增删时出现渲染错误。

2. 封装通用字段格式转换方法 #

接口要求每个提交字段都要符合{value: "字段值", operand: 1}的结构，写一个通用转换函数避免逐字段重复拼接：

/**
 * 把普通键值对转换为PATCH接口要求的格式
 * @param {Object} rawFields 原始字段键值对
 * @param {number} operand 接口要求的operand固定值，默认传1
 * @returns {Object} 转换后的接口参数
 */
const transformPatchParams = (rawFields, operand = 1) => {
  return Object.entries(rawFields).reduce((result, [fieldKey, fieldValue]) => {
    result[fieldKey] = {
      value: fieldValue,
      operand: operand
    }
    return result
  }, {})
}

3. 调整PATCH提交逻辑 #

提交时先找到当前编辑行的最新数据，取出需要提交的字段，经转换函数处理后再发起请求：

async userEdit(id) {
  // 从本地列表中找到当前编辑的用户最新数据
  const currentUser = localUserList.value.find(item => item.id === id)
  // 组装需要提交的原始字段
  const rawParams = {
    username: currentUser.username,
    email: currentUser.email,
    mobile: currentUser.mobile,
    nationalCode: currentUser.nationalCode
    // 其余需要提交的字段按相同规则添加
  }
  // 转换为接口要求的格式
  const submitFormData = transformPatchParams(rawParams)
  // 发起PATCH请求
  const response = await this.$store.dispatch('axiosPatch', {
    url: `/employees/${id}`,
    formData: submitFormData
  }, this.$data)
  // 请求成功后可按需添加提示、刷新列表等后续逻辑
}

可选优化：仅提交修改过的字段 #

如果不需要全量提交字段，可以提前保存列表加载时的原始数据快照，提交时对比只传发生变更的字段，减少无效参数：

// 列表加载完成后存一份原始快照
const originalUserSnapshot = ref(JSON.parse(JSON.stringify(localUserList.value)))

const getChangedFields = (userId, currentData) => {
  const original = originalUserSnapshot.value.find(item => item.id === userId)
  return Object.keys(currentData).reduce((changed, key) => {
    if (original[key] !== currentData[key]) {
      changed[key] = currentData[key]
    }
    return changed
  }, {})
}

提交时先调用getChangedFields拿到变更字段，再做格式转换即可。

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