鍍金池/ 問答/HTML/ vue.js如何將form存成json格式

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

RT,一個form里有多行輸入,我想問下怎么能把所有的內(nèi)容存成json的格式,再發(fā)送出去?我找到了很多方法都是jquery寫的,想問問vue在這方面如何做到。
我可能闡述的不是很清楚,我是用的是JSON.stringfy,但我想要的json格式比較復(fù)雜,范例如下:

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

其中,我會有四個輸入框,分別是對應(yīng)group_number(1),group_number(2), user_id(1),user_id(2)。前兩個input就輸入一個值,后兩個會分別輸入多個,比如在user_id這個input里一次性粘貼進100,200,300。我需要把這些存為數(shù)組格式,同時整個form又是個大的list數(shù)組,包含這兩個object。主要是格式涉及數(shù)組,就不知道如何操作了。想知道在輸入處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 =>{
          ........
      }

    }

這是我目前使用的方法,肯定是少東西的。

回答
編輯回答
獨特范

多行輸入 form 可以放在一個對象中比方說

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

在 form 中使用 v-model = inputForm.a
你可以直接使用 JSON.stringify(this.inputForm) 轉(zhuǎn)換為JSON格式
具體可以參考 MDN JSON

當然,像 axios 這樣的 庫 直接會把你的對象 轉(zhuǎn)為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 新建數(shù)組中的對象賦予 :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} 這樣做
這個看你需要傳遞的數(shù)據(jù)是 這個數(shù)組還是 對象中 的數(shù)組,甚至說 在model 中還要加一層
v-model="ob.list[0].user_id" 了

2018年2月6日 08:33
編輯回答
舊城人

這個用原生方法和JSON對象就好的,現(xiàn)在瀏覽器都支持JSON對象了
比如form有很多子段獲得了值,你直接用方法可以把值獲取來賦值給一個自定義對象,

var mydata={
   keyName1:keyValue1,
   keyName2:keyValue2,
   ...
   keyNameX:keyValueX
};
//其中各個keyName應(yīng)該是你已經(jīng)確定的(或者利用DOM對象遍歷查詢到),keyValue值可以活動到的(可以用DOM對象查詢到)

然后利用JSON對象進行轉(zhuǎn)換(轉(zhuǎn)為JSON文本字符串以方便傳輸)

JSONStr=JSON.stringify(myData);
2018年3月1日 22:13
編輯回答
命多硬

題主不管使用不使用vue.js, 如果只是把form表單數(shù)據(jù)變成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}
2017年4月11日 18:35