Why is my POST faling in this simple VueJS form? - vue.js

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

Answer 1

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.

Answer 2

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 ^_^