Почему мой POST фальсифицируется в этой простой форме VueJS?

Question

Это для формы vueJS.У меня есть вложенное значение с именем "лекарства", которое я пытаюсь отправить для формы .... У меня есть этот код в моем шаблоне и области данных, которая связана с лекарствами.после того, как я выбрал лекарство из поля выбора, вписал оставшиеся поля и отправил сообщение об ошибке, сообщая мне, что я не отправляю все свои значения ... вот отрывки из моего кода ...

ПРИМЕЧАНИЕ:Я не показываю всю форму ... только часть, связанную с полем формы лекарства.

<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);
      })
}

ОШИБКА: это ошибка, которую я получаю ....

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

ВСЕ ДРУГИЕ ПАРАМЫ ОТПРАВЛЯЮТСЯ ... но те, что для лекарств, не ...

Что я делаю не так?

РЕДАКТИРОВАТЬ: обновленный пост Axios, как предложил Хусам Ибрагим

Answer 1

Ключ был в том, как я получил «имя» в моем шаблоне.Таким образом, я изменил это до этого ...

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

ПРИМЕЧАНИЕ: посмотрите, как: значение = catMed.medication.name настроен?Это ключ.теперь, когда я проверяю свои параметры в браузере, я вижу, что я устанавливаю для Medication.name значение, которое я намереваюсь.

И внутри своего axios.post я меняю строку лекарства на эту ...

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

Теперь два значения публикуют параметры ^ _ ^

Answer 2

Как говорит Хусам, в определении функции this относится к "owner" функции.Поэтому, когда вы обращаетесь к этому в функции axios, this относится к функции axios, а не к экземпляру vue.

Также - я хотел бы создать объект в данных экземпляра vueи используйте это для своего поста.Делает намного более чистый код, и vue может получить доступ к объекту и свойствам.

Вот так:

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

и функция axxios выглядит следующим образом:

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

In vueВы можете использовать v-model="myObject.data1" для доступа к свойствам.Таким образом, вы можете использовать axxios get и присвоить результат vm.myObject, и vue отобразит новые данные.