Отправка данных формы Dynami c с использованием Vue и Django - PullRequest
0 голосов
/ 14 февраля 2020

Я использую Vue js для отправки данных из обычной формы. html в Django. Уже несколько дней я использую python и Django.

В моей форме есть раздел, в котором есть область, позволяющая пользователю динамически добавлять поля формы (регулярные входы и загрузка файлов). Я увеличиваю значение имени, используя индекс каждый раз, когда пользователь добавляет еще одну строку. Я не уверен, как go хранить эти данные формы.

enter image description here


HTML

....
<table class="table" id="documentsTable">
    <thead>
        <tr>
           <th>Type</th>
           <th>Number</th>
           <th>File</th>
           <th>Expiry Date</th>
           <th></th>
        </tr>
   </thead>
   <tbody>
        <tr v-for="(required_document, doc_index) in required_documents" :key="doc_index">
           <td>
               <select :name="`type${doc_index}`" class="form-control" :ref="`type${doc_index}`">
                    <option :value="index" v-for="(document_type, index) in document_types">[[document_type]]</option>
               </select>
           </td>
           <td>
               <input type="text" :name="`number${doc_index}`" class="form-control" :ref="`number${doc_index}`">
           </td>
           <td>
               <input type="file" :name="`file${doc_index}`" class="form-control" :ref="`file${doc_index}`">
           </td>
           <td>
               <input type="date" :name="`date_expiry${doc_index}`" class="form-control" :ref="`date_expiry${doc_index}`">
           </td>
           <td>
               <button class="btn btn-danger delete-row" @click.prevent="removeRow(doc_index)"><i class="pe-7s-trash"></i></button>
           </td>
         </tr>
   </tbody>
</table>

....Vue Section
...
save() {
    form = document.getElementById('individualForm');
    var formData = new FormData(form);

    axios.post('/customers/individual/store', formData).then((response) => {

    }).catch((errors) => {
        console.log(errors)
    });
}

views.py

def store_individual(request):
    if request.method == 'POST':

        individual_form = IndividualForm(request.POST)

        // for dynamic section
        required_document_form = RequiredDocumentForm(request.POST, request.FILES)

forms.py

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', }))

Вывод

  • Вывод "print (запрос) .POST) "выводится в QueryDict
  • Вывод" print (request.FILES) "выводится в MultiValueDict

enter image description here

Вот где я застрял. Я не знаю, как хранить информацию после этого.

1 Ответ

0 голосов
/ 14 февраля 2020

Вызовите функцию сохранения формы после проверки.

if required_document_form.is_valid():
    required_document_form.save()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...