How to save form in json format by vue.js

RT, there are multiple lines of input in a form. I would like to ask how can all the content be saved in json format and then sent out? I"ve found a lot of methods written by jquery, and I"d like to ask vue how to do this.
I may not be very clear. I am using JSON.stringfy, but the json format I want is more complex. The example is as follows: 

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

where I will have four input boxes corresponding to group_number (1), group_number (2), user_id (1) and user_id (2). Enter one value for the first two input, and enter more than one for the last two, for example, paste 100200300 into the input of user_id at one time. I need to save these in array format, while the entire form is a large list array containing these two object. The main reason is that the format involves arrays, so I don"t know how to operate it. Want to know how to write v-model at the input, and then what is the format of the data return part.
Front end: 

<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 section: 

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 =>{
          ........
      }

    }

this is the method I use at the moment, and it must be something less.

Javascript vue.js
Mar.07,2021

multiple lines of input form can be placed in an object, for example, 

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

use v-model = inputForm.an in form
you can directly use JSON.stringify (this.inputForm) to convert to JSON format
for more information, please see MDN JSON

.

of course, libraries like axios will directly convert your objects to json and directly pass in inputForm
modify the question and answer code as follows 

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

write

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

there will be key problems. Please refer to my blog uses WeakMap to assign objects in Vue's new array: key
if there are two and will not change 

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

is fine, but I still suggest the above
because userId is a string and you also use input
, so change the code

before uploading. 
 form = list.map(x =>({
    group_number: x.group_number
    //     
    //   1
    user_id: x.user_id.split('').filter(x => x.trim())
    }))

finally, JSON.stringify will follow the format you need, and you may have to do this again {list}.
this depends on whether the data you need to pass is this array or an array in the object. It is even said that you need to add a layer of
v model model = "ob.list [0] .user _ id" in model

.

this is fine with native methods and JSON objects. Now browsers all support JSON objects.
for example, form has many sub-segments to get values. You can directly use the method to assign values to a custom object. 

var mydata={
   keyName1:keyValue1,
   keyName2:keyValue2,
   ...
   keyNameX:keyValueX
};
//keyNameDOMkeyValueDOM

then convert using the JSON object (converted to JSON text string for easy transmission) 

JSONStr=JSON.stringify(myData);

whether or not you use vue.js, you can do this if you just change the form form data into JSON format. But if two-way binding is involved in form, refer to the previous answer. 

// 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}

Previous: Vim spell check result is set to yellow

Next: Version iteration, must be manually refreshed to switch version issues

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu