The problem of json Array format in vue.js

RT, I now need to have multiple input, on the front-end (vue) and generate a form in json format for post. The problem now is that I can"t store the input in input into an array format.
for example, the json format I need:

{
     "name" :"test",    
    "mylists":[
        {
            "user_ids":[100, 200],
            "group":"1"
        },
        {
            "user_ids":[400,500],
            "group":"2"
        }
    ]
}

but now I can only get the following format:

{
    "name" :"test",    
    "mylists":[
        {
            "user_ids":" 100, 200",
            "group":"1"
        },
        {
            "user_ids":" 400,500",
            "group":"2"
        }
    ]
}

my user_ids is all entered in the same input. For example, there are two input, inputs, the first input 100200 and the second input 400,500 instead of an input that corresponds to only one value. How can I store the json format I need in this situation? After input, the default is stirng, "100200". But what I need is an array of [100,200], which is in int format.

Mar.09,2021

you can use v-model to bind input variables to construct an array yourself.


when he is still an object

form.mylists =  form.mylists.map(x => ({
    group: x.group,
    //   ,    
    user_ids:  user_ids.split(',').filter(x => x.trim())
}))

is fine


personally, I think you can completely add a field to represent the data you use to save, and then you watch user_ids to use Synchronize for the new field. There is no need to use user_ids for both two-way binding and data preservation, and they are of different types.

...
data: {
     "name" :"test",    
    "mylists":[
        {    
            user_idsArr: [],
            "user_ids":[100, 200],
            "group":"1"
        },
        {
            "user_ids":[400,500],
            "group":"2"
        }
    ]
}
watch: {
  'mylists.user_ids' () {
     this.mylists.user_idsArr = this.mylists.user_ids.split(',')
  }
}
...
Menu