How to create a List Render JSON from a Dynamic List for an API response in Vue?

Question

I am a beginner in at Vue.js version 2.6.11.

I have a form where a person can add a list of toys. So the list is dynamic. How do we add this dynamic list into a JSON data structure in a POST request?

I cannot change the API.

For example the first list to send to a POST request might be

      "toyCollection": 
       [
        {
          "toyName": "yo-yo",
          "toyDescription": "ball on a string",
          "toyAge": 15,
          "company": {
            "companyName": "yo yo company"
            "companyYear": "1999"
          }
        }
      ]

The second time someone creates a list of toys in this dynamic list might be

      "toyCollection": 
       [
         {
          "toyName": "yo-yo",
          "toyDescription": "ball on a string",
          "toyAge": 15,
          "company": {
            "companyName": "yo yo company"
            "companyYear": "1999"
          }
        },
        {
          "toyName": "barbie",
          "toyDescription": "dolls in a house",
          "toyAge": 21,
          "company": {
            "companyName": "mattel"
            "companyYear": "1959"
          }
        },
        {
          "toyName": "transformers",
          "toyDescription": "robots in disguise",
          "toyAge": 20,
          "company": {
            "companyName": "Hasbro"
            "companyYear": "1984"
          }
        }
      ]

How do we write this in Vue so that this is dynamic?

   methods: {
     const postRequest = {
        toyCollection: [ //if 1 toy in list
          {
            toyName: "yo-yo", // this.form.toyName <---- would read the data
            toyDescription: "ball on a string", //hardcoded here for simplicity for example
            toyAge: 15,
            company: {
               companyName: "yo yo company"
               similarToysFromCompany: "1999"
            }
          }
        ]
       }
      }    

If there are three toys in the collection

   methods: {
     const postRequest = {
        toyCollection: [ //if 3 toys in list
          {
            toyName: "yo-yo",
            toyDescription: "ball on a string",
            toyAge: 15,
            company: {
               companyName: "yo yo company"
               similarToysFromCompany: "1999"
             }
          },
          {
            toyName: "barbie",
            toyDescription: "dolls in a house",
            toyAge: 21,
            company: {
              companyName: "mattel"
              companyYear: "1959"
            }
          },
          {
            toyName: "transformers",
            toyDescription: "robots in disguise",
            toyAge: 20,
            company: {
              companyName: "Hasbro"
              companyYear: "1984"
             }
           }
         ]
       }
     }    

The list can be any size, depending on how many toys a person adds to this list. How do we make this dynamic based on the list?

Then I would call my API with this object

this.methodCallToAPI(postRequest);

Thanks for any help!

============== EDIT

I have a template to input fields

         <form>
              <!-- Name -->
                  <input
                    v-model="form.toyName"
                    id="toy-name"
                    class="input"
                    type="text"
                  />
                </div>
          </form>

Then in the Script, it watches or updates the data fields based on what the user types into the input text fields.

export default {
  name: "CreateToyCollection",

  data () {
    return {
      form: {
        toyName: "",
        toyDescription: "",
        toyAge: "",
             company: {
               companyName: "",
               similarToysFromCompany: ""
             }
          }
        }
      },


  watch: {
      this.form.toyName = "";
      this.form.toyDescription = "";
      this.form.toyAge = "";
      // etc for Company
  }
}

I'm working on the list part, but this is how I want to pass in the dynamic data

Answer 1

In the data add a new array toyCollection :

data () {
    return {
      toyCollection: [],
      form: {
        toyName: "",
        ...
      },
      ...

Every time form is submitted, push the submitted data to it like this.toyCollection.push(data)

Later in your post request you can send this.toyCollection as the payload.