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."]}}

所有其他参数都已发送...但药物参数不是...

我在做什么错了？

编辑：根据Husam Ibrahim的建议更新了axios帖子

Answer 1

就像Husam所说，在函数定义中，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..
  });

在vue中，您可以使用v-model="myObject.data1"来访问属性。这样，您可以使用axxios get并将结果分配给vm.myObject，而vue将呈现新数据。

Answer 2

关键在于我如何在模板中获取“名称”。所以我将其更改为此...

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

注意：看看如何配置：value = 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},
...

现在，这两个值是发布参数^ _ ^

为什么我的POST无法以这种简单的VueJS格式显示？

2 个答案: