Vue3中用ES6/Lodash批量移除API返回对象键的_id后缀

核心实现代码 #

直接用原生ES6语法即可完成所有末尾带_id的键名重命名，无需额外依赖，放在接口422状态码的回调分支中执行即可：

externalResults.value = Object.fromEntries(Object.entries(err.response.data.details).map(([k, v]) => [k.replace(/_id$/, ''), v]))

如果项目中已经引入Lodash，也可以用更简洁的mapKeys方法实现：

externalResults.value = _.mapKeys(err.response.data.details, (_, key) => key.replace(/_id$/, ''))

逻辑说明 #

• 正则/_id$/只会匹配键名末尾的_id字符串，不会误改id_number这类中间包含_id的键名，所有类似state_id/user_id/category_id的字段都会自动映射为本地模型对应的state/user/category属性
• 转换过程中错误信息数组完全保留，处理后的结构和Vuelidate校验规则的字段路径完全对齐，可以直接被表单校验组件读取渲染
• 用题目给出的错误返回样例测试，转换后输出结果完全符合预期：

{
  "state": [
    "The state_id field is mandatory."
  ]
}

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