title: Getting Bad Request 400 when sending data to django rest framework through axios
body: <p>I am trying to make a web application in which django with django-rest-framework serves APIs and Vuejs2 is used for frontend purposes. </p>
  
  <p>Here is models.py</p>
  
  <pre><code>class ClientEntry(models.Model):
    id = models.AutoField(primary_key=True)
    parent_name = models.CharField(
      max_length=30,
      blank=False,
      help_text="Enter parent's name"
    )
    student_name = models.CharField(
      max_length=30,
      blank=True,
      help_text="Enter student's name"
    )
    tutor_name = models.CharField(
      max_length=30,
      blank=False,
      help_text="Enter tutor's name"
    )
    mode_payment = models.CharField(
      "mode of payment",
      max_length=30,
      blank=False,
      help_text="how are we getting paid"
    )
    amount_recieved_parent = ArrayField(
      models.CharField(
        max_length=30
      ),
      blank=True,
      null=True
    )
    payment_mode_parent = ArrayField(
      models.CharField(
        max_length=30
      ),
      blank=True,
      null=True
    )
    date_payment_parent = ArrayField(
      models.DateField(),
      blank=True,
      null=True
    )
    amount_payed_tutor = ArrayField(
      models.CharField(
        max_length=30
      ),
      blank=True,
      null=True
    )
    payment_mode_tutor = ArrayField(
      models.CharField(
        max_length=30
      ),
      blank=True,
      null=True
    )
    date_payment_tutor = ArrayField(
      models.DateField(),
      blank=True,
      null=True
    )
    payment_status = models.CharField(
      max_length=30,
      blank=True,
      null=True
    )
    tuition_status = models.CharField(
      max_length=30,
      blank=True,
      null=True
    )
    payment_due_date = models.DateField(
      blank=True,
      null=True
    )
    class Meta:
      ordering = ['id']
      verbose_name_plural = "Client entries"
  
    def __str__(self):
      return str(self.parent_name)
  </code></pre>
  
  <p>serializers.py</p>
  
  <pre><code>class ClientEntrySerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
      model = ClientEntry
      fields = ('url', 'id', 'parent_name','student_name', 'tutor_name',
        'mode_payment', 'amount_recieved_parent', 'payment_mode_parent',
        'date_payment_parent', 'amount_payed_tutor', 'payment_mode_tutor', 
        'date_payment_tutor', 'payment_status', 'tuition_status', 
        'payment_due_date')
  </code></pre>
  
  <p>views.py</p>
  
  <pre><code>class ClientEntryViewSet(viewsets.ModelViewSet):
    queryset = ClientEntry.objects.all()
    serializer_class = ClientEntrySerializer
  </code></pre>
  
  <p>Here are three of the vue components which are directly related to my question</p>
  
  <p>DashboardDetail.vue</p>
  
  <pre><code>export default {
    name: 'DashboardDetail',
    components: {
      DashboardDetailEdit,
      DashboardDetailPost
    },
    data () {
      return {
        entry: {},
        paymentEntry: {
          url: '',
          amountRecievedParentArray: [],
          paymentModeParentArray: [],
          datePaymentParentArray: [],
          amountPaidTutorArray: [],
          paymentModeTutorArray: [],
          datePaymentTutorArray: []
        }
      }
    },
    methods: {
      getEntry() {
        axios({
          method: 'get',
          url: 'http://127.0.0.1:8000/api/dashboard/' + this.$route.params.id + '/'
        }).then(response =&gt; this.entry = response.data);
      }
    },
    created () {
      this.getEntry()
    },
    computed: {
      paymentEntryComputed: function () {
        if (this.entry !== null &amp;&amp; this.entry.hasOwnProperty("amount_recieved_parent") &amp;&amp; this.entry.amount_recieved_parent !== null)
          this.paymentEntry.amountRecievedParentArray = this.entry.amount_recieved_parent
        if (this.entry !== null &amp;&amp; this.entry.hasOwnProperty("payment_mode_parent") &amp;&amp; this.entry.payment_mode_parent !== null)
          this.paymentEntry.paymentModeParentArray = this.entry.payment_mode_parent
        if (this.entry !== null &amp;&amp; this.entry.hasOwnProperty("date_payment_parent") &amp;&amp; this.entry.date_payment_parent !== null)
          this.paymentEntry.datePaymentParentArray = this.entry.date_payment_parent
        if (this.entry !== null &amp;&amp; this.entry.hasOwnProperty("amount_payed_tutor") &amp;&amp; this.entry.amount_payed_tutor !== null)
          this.paymentEntry.amountPaidTutorArray = this.entry.amount_payed_tutor
        if (this.entry !== null &amp;&amp; this.entry.hasOwnProperty("payment_mode_tutor") &amp;&amp; this.entry.payment_mode_tutor !== null)
          this.paymentEntry.paymentModeTutorArray = this.entry.payment_mode_tutor
        if (this.entry !== null &amp;&amp; this.entry.hasOwnProperty("date_payment_tutor") &amp;&amp; this.entry.date_payment_tutor !== null)
          this.paymentEntry.datePaymentTutorArray = this.entry.date_payment_tutor
        if (this.entry !== null &amp;&amp; this.entry.hasOwnProperty("url"))
          this.paymentEntry.url = this.entry.url
        return this.paymentEntry
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>DashboardDetailPost.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;dashboard-detail-form @submit-query="addPaymentEntry"
    :paymentEntry="clonePaymentEntry"
    ref="dashDetailForm"&gt;&lt;/dashboard-detail-form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    components: {
      DashboardDetailForm
    },
    name: 'DashboardDetailPost',
    props: {
      paymentEntry: Object
    },
    data(){
      return {
        clonePaymentEntry: {}
      }
    },
    methods: {
      addPaymentEntry (data) {
        axios({
          method: 'put',
          url: this.paymentEntry.url,
          data: {
            amount_recieved_parent: data.amountRecievedParentArray,
            payment_mode_parent: data.paymentModeParentArray,
            date_payment_parent: data.datePaymentParentArray,
            amount_payed_tutor: data.amountPaidTutorArray,
            payment_mode_tutor: data.paymentModeTutorArray,
            date_payment_tutor: data.datePaymentTutorArray
          }
        })
        .then(() =&gt; {
          this.$refs.dashDetailForm.resetForm()
        })
        .catch((error) =&gt; {
          console.log(error)
        })
      }
    },
    created () {
      this.clonePaymentEntry = this.paymentEntry
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>DashboardDetailForm.vue</p>
  
  <pre><code>export default {
    components: {
      FormDropdown,
      FormInput
    },
    name: 'DashboardDetailForm',
    props: {
      editDetailForm: Object,
      paymentEntry: Object
    },
    data () {
      return {
        showForm: false,
        form: {
          amountRecievedParent: null,
          paymentModeParent: '',
          datePaymentParent: '',
          amountPaidTutor: null,
          paymentModeTutor: '',
          datePaymentTutor: ''
        },
        paymentModeArray: [
          { value: "cash", text: "Cash" },
          { value: "paytm", text: "PayTM" },
          { value: "bank seth", text: "Bank Seth" },
          { value: "bank anuj", text: "Bank Anuj" },
          { value: "kotak", text: "Kotak" }
        ]
      }
    },
    created () {
      if (typeof this.editDetailForm !== "undefined") {
        this.form.amountRecievedParent = this.editDetailForm.amountRecievedParent
        this.form.paymentModeParent = this.editDetailForm.paymentModeParent
        this.form.datePaymentParent = this.editDetailForm.datePaymentParent
        this.form.amountPaidTutor = this.editDetailForm.amountPaidTutor
        this.form.paymentModeTutor = this.editDetailForm.paymentModeTutor
        this.form.datePaymentTutor = this.editDetailForm.datePaymentTutor
      }
    },
    methods: {
      formToggle () {
        this.showForm = !this.showForm
      },
      resetDetailForm () {
        this.form.amountRecievedParent = null,
        this.form.paymentModeParent = '',
        this.form.datePaymentParent = '',
        this.form.amountPaidTutor = null,
        this.form.paymentModeTutor = '',
        this.form.datePaymentParent = ''
      },
      computePaymentEntry () {
        this.paymentEntry.amountRecievedParentArray.push(this.form.amountRecievedParent)
        this.paymentEntry.paymentModeParentArray.push(this.form.paymentModeParent)
        this.paymentEntry.datePaymentParentArray.push(this.form.datePaymentParent)
        this.paymentEntry.amountPaidTutorArray.push(this.form.amountPaidTutor)
        this.paymentEntry.paymentModeTutorArray.push(this.form.paymentModeTutor)
        this.paymentEntry.datePaymentTutorArray.push(this.form.datePaymentTutor)
        this.validateBeforeSubmit()
      },
      validateBeforeSubmit () {
        this.$validator.validateAll().then(() =&gt; {
          if(!this.errors.any()) {
            this.$emit('submit-query', this.paymentEntry)
            this.formToggle()
          }
        })
      }
    }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Now my form property object of DashboardDetailForm component is getting values correctly and it is getting passed to DashboardDetailPost correctly as well</p>
  
  <p>But when I run addPaymentEntry() method which contains axios block for PUT request I am always getting Bad Request Error in django </p>
  
  <pre><code>Bad Request: /api/dashboard/1/
  [05/Nov/2018 20:50:27] "PUT /api/dashboard/1/ HTTP/1.1" 400 414
  </code></pre>
  
  <p>Initially my amount_recieved_parent was a PositiveIntegerField and I got the same error so I changed it to CharField after flushing database but it didn't changed anything. I am completely out of ideas to try and not been able to solve this error. </p>