Why is my POST faling in this simple VueJS form?

Question

This is for a vueJS form. I have a nested value named "medications" I'm trying to submit for a form....I have this code in my template and data area that is related to medications. after I select the medication from the select box and enter the remaining fields and submit I get an error telling me I'm not submitting all my values...here are snips from my code...

NOTE: I'm not showing the entire form...only the part related with medication form field.

<template>
...
<div class="col-sm-2">
  <b-form-select v-model="medication">
     <option selected :value="null">Medication</option>
     <option value="name" v-for="catMed in catMedications">{{catMed.medication.name}}</option>
  </b-form-select>
</div>
...
</template>

data(){
...
duration: '',
frequency: '',
name:   '',
medication: {name: '', duration: '', frequency: '', dosage: '', notes: ''},
...

(also, here is my POST function..if it helps)
      postFeedings(catID, catName) {
    const vm = this;
    axios.post(`/api/v1/carelogs/`,{
      cat: {id: catID, name: catName},
      weight_unit_measure: 'G',
      weight_before_food: this.weight_before_food,
      food_unit_measure: 'G',
      amount_of_food_taken: this.amount_of_food_taken,
      food_type: this.food_type,
      weight_after_food: this.weight_after_food,
      stimulated: this.stimulated,
      stimulation_type: this.stimulation_type,
      medication: {name: vm.name, duration: vm.duration, frequency: vm.frequency, dosage: vm.dosage, notes: vm.notes},
      medication_dosage_unit: 'ML',
      medication_dosage_given: this.medication_dosage_given,
      notes: this.notes
    })
      .then(response => {
        console.log(response);
        response.status === 201 ? this.showSwal('success-message','Carelog added') : null;
        this.getFeedings(catName);
      })
      .catch(error => {
        console.log(catID, catName);
        console.log(error);
        this.showSwal('auto-close', error);
      })
}

ERROR: This is the error I get back ....

{"medication":{"frequency":["This field may not be blank."],"name":["This field may not be blank."]}}

ALL THE OTHER PARAMS ARE BEING SENT...but the ones for medication are not...

What am I doing wrong?

EDIT: updated axios post as Husam Ibrahim suggested

Is frequency and name the only fields that are blank? If so, how are this.frequency and this.name populated? — tony19
– tony19, Commented Oct 1, 2018 at 18:11
yes @tony19 frequency and name are the only fields that are blank. And that's my problem, I'm not sure how to populate them. — Jessi
– Jessi, Commented Oct 1, 2018 at 18:30
Where in your template or script do you set this.frequency and this.name? — tony19
– tony19, Commented Oct 1, 2018 at 18:53
@tony19 that's the key...your clue made me focus on my template section and how I was setting the value for "name" — Jessi
– Jessi, Commented Oct 1, 2018 at 21:21

Ernst Reidinga · Accepted Answer · 2018-10-01 16:55:48Z

0

Like Husam says, In a function definition, this refers to the "owner" of the function. So when u access this in the axios function, this refers to the axios function, not to the vue instance.

Also - what i like to do is, create the object in the data of the vue instance, and use that for your post. Makes much cleaner code, and vue can access the object and properties.

Like this:

  data () {
    myObject: {
      data1: 'abc',
      data2: 'def',
      data3: 123,
      data4: false
    }
  }

and the axxios function like this:

const vm = this;
  axios
  .post('url.here', vm.myObject)
  .then(response => {
    // Handle response..
  });

In vue you can use v-model="myObject.data1" to access the properties. This way you can use axxios get and assign the result to vm.myObject and vue will render the new data.

edited Oct 1, 2018 at 16:55

answered Oct 1, 2018 at 16:48

Ernst Reidinga

2032 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jessi Over a year ago

see my response to Husam.

Ernst Reidinga Over a year ago

Can you post a bit more code? First log to the console, before posting to see if the values posted are there.. this is good to find out if the error is in the post method, or the data is empty..

Jessi · Accepted Answer · 2018-10-01 21:41:41Z

The key was in how I was getting "name" in my template. So I changed it up to this...

  <div class="col-sm-2">
      <b-form-select v-model="medication">
          <option selected :value="null">Medication</option>
          <option :value=catMed.medication.name v-for="catMed in catMedications">{{catMed.medication.name}}</option>
      </b-form-select>
  </div>

NOTE: see how :value=catMed.medication.name is configured? That's the key. now when I inspect my params in the browser I can see that I'm setting Medication.name to the value I intend.

And inside my axios.post I change the medication line to this...

...
medication: {name: this.medication, duration: this.duration, frequency: this.medication_dosage_given, dosage: this.dosage, notes: this.notes},
...

Now the two values are posting params ^_^

Collectives™ on Stack Overflow

Why is my POST faling in this simple VueJS form?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related