title: Post Dynamic form data using Vue and Django
body: <p>I am using Vue js to post data from a regular .html form to Django. Been using python and Django for a few days now.</p>
  
  <p>There is a section of my form which contains an area that allows the user to dynamically add form fields(regular inputs and file uploads). I increment name value by using the index everytime the user adds another row. I am not sure how to go about storing these form data.</p>
  
  <p><a href="https://i.stack.imgur.com/LBhAs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LBhAs.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>HTML</p>
  
  <pre><code>....
  &lt;table class="table" id="documentsTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
             &lt;th&gt;Type&lt;/th&gt;
             &lt;th&gt;Number&lt;/th&gt;
             &lt;th&gt;File&lt;/th&gt;
             &lt;th&gt;Expiry Date&lt;/th&gt;
             &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
          &lt;tr v-for="(required_document, doc_index) in required_documents" :key="doc_index"&gt;
             &lt;td&gt;
                 &lt;select :name="`type${doc_index}`" class="form-control" :ref="`type${doc_index}`"&gt;
                      &lt;option :value="index" v-for="(document_type, index) in document_types"&gt;[[document_type]]&lt;/option&gt;
                 &lt;/select&gt;
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;input type="text" :name="`number${doc_index}`" class="form-control" :ref="`number${doc_index}`"&gt;
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;input type="file" :name="`file${doc_index}`" class="form-control" :ref="`file${doc_index}`"&gt;
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;input type="date" :name="`date_expiry${doc_index}`" class="form-control" :ref="`date_expiry${doc_index}`"&gt;
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;button class="btn btn-danger delete-row" @click.prevent="removeRow(doc_index)"&gt;&lt;i class="pe-7s-trash"&gt;&lt;/i&gt;&lt;/button&gt;
             &lt;/td&gt;
           &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  
  ....Vue Section
  ...
  save() {
      form = document.getElementById('individualForm');
      var formData = new FormData(form);
  
      axios.post('/customers/individual/store', formData).then((response) =&gt; {
  
      }).catch((errors) =&gt; {
          console.log(errors)
      });
  }
  </code></pre>
  
  <p>views.py</p>
  
  <pre><code>def store_individual(request):
      if request.method == 'POST':
  
          individual_form = IndividualForm(request.POST)
  
          // for dynamic section
          required_document_form = RequiredDocumentForm(request.POST, request.FILES)
  </code></pre>
  
  <hr>
  
  <p>forms.py</p>
  
  <pre><code>class RequiredDocumentForm(forms.ModelForm):
  class Meta:
      model = RequiredDocument
      fields = ['type', 'number', 'file', 'date_expiry']
  
  TYPES = (('', 'Select Type'), ('passport', 'Passport'), ('national_id', 'National ID'),
           ('drivers_licence', "Driver's Licence"),
           ('nis', "NIS Number"))
  
  def __init__(self, *args, **kwargs):
      super().__init__(*args, **kwargs)
  
  
      total_documents = int(args[0]['total_documents'])
  
      for i in range(total_documents):
          # type0, #type1, number0, number1, etc
          type_field_name = 'type%s' % (i,)
          number_field_name = 'number%s' % (i,)
          file_field_name = 'file%s' % (i,)
          date_expiry_field_name = 'date_expiry%s' % (i,)
  
          self.fields[type_field_name] = forms.CharField(required=False, widget=forms.Select(choices=self.TYPES, attrs={'class': 'form-control', }))
          self.fields[number_field_name] = forms.CharField(required=False, widget=forms.TextInput(attrs={'class': 'form-control', }))
          self.fields[file_field_name] = forms.FileField(max_length=32,
                         widget=forms.ClearableFileInput(attrs={'multiple': False, 'class': 'form-control', }))
          self.fields[date_expiry_field_name] = forms.DateField(required=False, widget=SelectDateWidget(attrs={'class': 'form-control', }))
  </code></pre>
  
  <hr>
  
  <p>The Output</p>
  
  <ul>
  <li>The output of the "print(request.POST)" is outputted in a QueryDict</li>
  <li>The output of the "print(request.FILES)" is outputted in a MultiValueDict</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/Faebn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Faebn.png" alt="enter image description here"></a></p>
  
  <p>This is where I'm stuck. I don't how to store the information after this.</p>