如何将VueJS获取的表单元素数组JSON合并为单个对象

看起来你是想把表单里的元素转换成一个包含所有字段的单个JSON对象，而不是现在这种每个字段单独一个对象的数组对吧？问题出在你原来的循环逻辑里——每次迭代都新建一个空对象，只塞当前字段的键值对，然后push到数组里，自然就得到了一堆单属性对象的集合。

给你两种解决思路：

1. 修改原有循环逻辑 #

直接初始化一个空对象，循环时把每个表单元素的键值对都添加到这个对象里，而不是每次新建对象：

var elements = event.target.elements;
var form_data = {}; // 这里改成单个对象，不是数组
for (var i = 0; i < elements.length; i++) {
  const fieldName = elements[i].getAttribute('name');
  // 跳过没有name属性的元素，避免无效的空键
  if (fieldName) {
    form_data[fieldName] = elements[i].value;
  }
}
var form_json = JSON.stringify(form_data);

这样处理后，form_json就是你想要的格式：{"name":"John","age":"20","gender":"Male"}

2. 用现代浏览器的FormData API（更简洁） #

现代浏览器已经提供了更便捷的FormData接口来处理表单数据，不用手动写循环：

// 直接从表单元素创建FormData实例
const formData = new FormData(event.target);
// 把FormData转换成普通对象
const form_data = Object.fromEntries(formData);
// 转成JSON字符串
const form_json = JSON.stringify(form_data);

这种写法更简洁，而且自动忽略没有name属性的表单元素，还能兼容更多表单类型（比如文件上传，不过你这里只需要普通字段的话完全适用）。

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