title: Submit form array with vue.js and axios
body: <p>I'm new to Vue and building a search form that the user can add rows to as the search gets more complex. I can use Vue and Axios to submit a single form input fine, but am lost when moving the previous PHP and HTML form array POST process to Vue. The form fields will all be submitted to an API as JSON in the request.</p>
  
  <p>While I have found plenty of info on how to submit a form field with Vue, I haven't found anything that speaks to form element array submission.</p>
  
  <p>The form values look like the below and there can be one or more sets of these based on the user's input. I have tried naming with and without the basic "[]" to indicate multiple array items. These are in the Vue app as defined by "myapp-pages".</p>
  
  <pre><code>&lt;input type='text' v-model='advancedSearchForm.field' name='field' /&gt;
  &lt;input type='text' v-model='advancedSearchForm.operator' name='operator' /&gt;
  &lt;input type='text' v-model='advancedSearchForm.value' name='value' /&gt;
  </code></pre>
  
  <p>The Vue JS code is the following with the form items defined and the Axios POST function defined.</p>
  
  <pre><code>var app = new Vue({
      el: '#myapp-pages',
      data: {
          pages: [],
          pagecount: 0,
          advancedSearchForm: {
              field: "",
              operator: "",
              value: ""
          }
      },
      methods: {
          advancedSearch: function() {
              axios({
                  url: '/api/pages/search/advanced',
                  method: 'post',
                  data: {
                      search: this.advancedSearchForm
                  }
              })
              .then(function (response) {
                  app.pages = response.data.data.pages;
                  app.pagecount = response.data.data.pages.length;
              })
              .catch(function (error) {
                  console.log(error);
              });
          }
      }
  })
  </code></pre>
  
  <p>My questions are, does the use of v-model make sense here to try and register those fields with the Vue app? If so, how can I register an unknown number of the same DOM element as the user adds more rows? If not, how can Vue+Axios use these values to submit the POST request?</p>
  
  <p>Thanks for any help.</p>