vue.js如何将form存成json格式

Question

RT，一个form里有多行输入，我想问下怎么能把所有的内容存成json的格式，再发送出去？我找到了很多方法都是jquery写的，想问问vue在这方面如何做到。
我可能阐述的不是很清楚，我是用的是JSON.stringfy，但我想要的json格式比较复杂，范例如下：

{   
    "Test_number":"name1"
    "list":[
        {
            "user_id":[100, 200,300],
            "group_number":"1"
        },
        {
            "user_id":[400,500],
            "group_number":"2"
        }
    ]
}

其中，我会有四个输入框，分别是对应group_number(1),group_number(2), user_id(1),user_id(2)。前两个input就输入一个值，后两个会分别输入多个，比如在user_id这个input里一次性粘贴进100，200，300。我需要把这些存为数组格式，同时整个form又是个大的list数组，包含这两个object。主要是格式涉及数组，就不知道如何操作了。想知道在输入处v-model如何写，然后data return那部分的格式是什么。
前端部分：

<form action="" :model="test1" ref="test1" method="post" id="test1"  enctype="multipart/form-data">
    <label>Test number</label>
    <input type="text" name="test_number" id="test_number" v-model="test1.test_number">
    <input type="text"  v-model="test1.group_number" placeholder="group_number 1">
    <input type="text"  v-model="test1.user_id" placeholder="user_id 1">
    <input type="text"  v-model="test1.group_number" placeholder="group_number 2">
    <input type="text"  v-model="test1.user_id" placeholder="user_id 2">
     <button v-on:click="submitList($event)" class="btn the-submit">submit</button>
</form>

data部分：

data(){
      return{
      dataSet:{
        test_number:'',
        list:[
        {
          user_id:[],
          group_number:''
        },
        {
          user_id:[],
          group_number:''
        }
        ]
      }
    }
}

axios post:

submitWhiteList(event){
        event.preventDefault();

        let formData = new FormData();
        formData.append('dataSet', dataSet);


        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };


        axios.post("/upload", formData
          ,config
        ).then(rst =>{
          ........
      }

    }

这是我目前使用的方法，肯定是少东西的。

Answer 1

多行输入 form 可以放在一个对象中比方说

data () {
 return {
     inputForm: {
        a: 1,
        b: 2
    }
  }
}

在 form 中使用 v-model = inputForm.a
你可以直接使用 JSON.stringify(this.inputForm) 转换为JSON格式
具体可以参考 MDN JSON

当然，像 axios 这样的 库 直接会把你的对象 转为json 直接 把inputForm 传入即可
修改问题回答 代码如下

"list":[
        {
            "user_id":[100, 200,300],
            "group_number":"1"
        },
        {
            "user_id":[400,500],
            "group_number":"2"
        }
    ]

这样写

<div v-for="l in list">
    <input v-model="l.user_id">
    <input v-model="l.group_number">    
</div>

这会有 key 问题 可以参考 我的 博客 利用 WeakMap 对 Vue 新建数组中的对象赋予 :key
如果确定有两个且不会变的话

<input v-model="list[0].userId">

也可以，还是建议上面那一种
因为 userId 是字符串，你用的也是input
所以 再上传的时候先改一下代码

 form = list.map(x =>({
    group_number: x.group_number
    // 先分割 ， 字符串 然后 过滤掉空字符串。
    // 因为如果本身是空字符串 的话 会生成一个长度是1的空字符串列表
    user_id: x.user_id.split('，').filter(x => x.trim())
    }))

最后 JSON.stringify 按照你需要的格式，可能还要再 {list} 这样做
这个看你需要传递的数据是 这个数组还是 对象中 的数组，甚至说 在model 中还要加一层
v-model="ob.list[0].user_id" 了

Answer 2

这个用原生方法和JSON对象就好的，现在浏览器都支持JSON对象了
比如form有很多子段获得了值，你直接用方法可以把值获取来赋值给一个自定义对象，

var mydata={
   keyName1:keyValue1,
   keyName2:keyValue2,
   ...
   keyNameX:keyValueX
};
//其中各个keyName应该是你已经确定的（或者利用DOM对象遍历查询到），keyValue值可以活动到的（可以用DOM对象查询到）

然后利用JSON对象进行转换（转为JSON文本字符串以方便传输）

JSONStr=JSON.stringify(myData);

Answer 3

题主不管使用不使用vue.js, 如果只是把form表单数据变成JSON格式，都可以这样处理。 但如果form中涉及到双向绑定，就参考前面的答案。

// myform 就是你formData的表单 document.getElementById('myform')
var form = new FormData(myform)
var params = new URLSearchParams(form)
console.log(params) // "name=22&age=12"  
// 使用正则处理 /(\w+)=(\w+)&?/g
var reg = /(\w+)=(\w+)&?/g
var result = {}, matchs;
while(matchs = reg.exec(params)) {
    result[matchs[1]] = matchs[2]
}
console.log(result) // {name:22, age:12}