为什么我的 POST 在这个简单的 Vue JS 表单中失败了？答案

【问题标题】：Why is my POST faling in this simple VueJS form?为什么我的 POST 在这个简单的 Vue JS 表单中失败了？
【发布时间】：2018-10-01 16:10:45
【问题描述】：

这是一个 vueJS 表单。我有一个名为“medications”的嵌套值，我正在尝试提交表单……我的模板和数据区域中有与药物相关的代码。在我从选择框中选择药物并输入其余字段并提交后，我收到一条错误消息，告诉我我没有提交所有值...这是我代码中的片段...

注意：我没有显示整个表格...仅显示与药物表格字段相关的部分。

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

【问题讨论】：

只有frequency 和name 是空白的字段吗？如果是这样，this.frequency 和 this.name 是如何填充的？
是的 @tony19 频率和名称是唯一空白的字段。这就是我的问题，我不知道如何填充它们。
您在模板或脚本的哪个位置设置this.frequency 和this.name？
@tony19 这是关键......你的线索让我专注于我的模板部分以及我如何设置“名称”的值

标签： vue.js vuejs2

【解决方案1】：

就像 Husam 所说，在函数定义中，this 指的是函数的 "owner"。所以当你在 axios 函数中访问 this 时，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 会渲染新的数据。

【讨论】：

查看我对 Husam 的回复。
你能多贴一点代码吗？先登录到控制台，发帖前先看看贴出来的值有没有。。这样可以判断是post方法报错，还是数据为空。。

【解决方案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},
...

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

【讨论】：