title: vue js input form binding from v-for loop data
body: <p>I am sending a post request from vue, the vue form is created with v-for loop as it is an array of data objects. Within the data objects there is another set of objects with a field. How do i setup the data structure? And how do i pass the data with id into vue data structure since the for loop creates more than 1 object? Appreciate any help here! thank you!</p>
  
  <pre><code>&lt;div v-for="(list, index) in lists.items" :key="list.id"&gt;
      &lt;div class="card"&gt;
          &lt;div class="card-header"&gt;
              {{ list.title }}
          &lt;/div&gt;
          &lt;div class="card-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm"&gt;
                      Select quantity of item: &lt;br&gt;
                      &lt;input type="number" placeholder="Quantity of item"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm"&gt;
                      &lt;div v-for="addon in list.addons"&gt;
                          Include addons: &lt;br&gt;
                          &lt;input type="checkbox" :value="addon.id"&gt;
                          &lt;label&gt;{{ addon.name }}&lt;/label&gt;
                          &lt;input type="number" placeholder="Quantity of addon"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm"&gt;
                      &lt;input type="submit" class="btn btn-primary" value="Buy" @click.prevent="buy(index)"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to send </p>
  
  <pre><code>[
      { item_id: id },
      { quantity: quantity },
      [
          [
              { addon_id: id },
              { addon_quantity: quantity }
          ],
          [
              { addon_id: id },
              { addon_quantity: quantity }
          ]
      ]
  ] 
  </code></pre>
  
  <p>to back end. the addon array can contain a single object or multiple objects depending on whether they have been selected.</p>