Question

Here is a JSFiddle I created for you to see it working

我正在尝试通过提交输入的测试值来测试我的Vue.Js表单，但由于未定义，我遇到了400错误

我已经在Vue.js中工作了大约一个月，并且正在尝试测试简单的表单提交

我已经建立了一个简单的api端点，其响应将回显我提交的内容。

我已经在邮递员中进行了测试，并在我的vue.js应用程序中使用了硬编码字符串

但是，当我尝试通过在“ data：（）=>”中定义的变量来分配输入到表单中的值时，由于它们未定义，所以我不断得到400（错误请求）。

我在代码中设置了断点并逐步执行，似乎没有将输入的值分配给变量，所以在提交时出现400错误。任何人都可以看看我的代码并建议我应该如何分配值。

                       <v-toolbar color="#004977">
                          <v-btn 
                           v-on:click.native="addJob">
                            Submit
                          </v-btn>
                        </v-toolbar>
            <!-- End Footer -->

                      </div> 
                    </div>
                  </div>
                </v-form> 

              <v-layout>
              </v-layout>




                </v-container>
                </div>
              </div>
            </template>

            <script>

            import Vue from 'vue'
            import { mapActions, mapState, mapGetters } from 'vuex'
            import axios from 'axios';


            export default {

            types: {
                SUBMIT_INTAKE: 'SUBMIT_INTAKE',
                SET_INTAKE_PROPERTY: 'SET_INTAKE_PROPERTY',
                SET_IMPACTED_TEAMS: 'SET_IMPACTED_TEAMS'
            },

              data: () => ({

                  form: {
                    type: null,
                    RequestorName: '',
                    NameOfRequest: '',
                    SelectedPrioritizedInitiative: '',
                    RequestDescription: '',
                    PrimaryIntentTeam: '',
                    CPStrategy: [],
                    CPProductOpsTeams: [],
                    CPTechPods: [],
                    CPExternalTeams: [],
                    BusinessValue: '',
                    TimeCriticality: '',
                    RiskReduction: '',
                  },
                  isSubmitted:false,
                  impactedTeams: [],
                  valid: false,


                  impactedTeams: [],
                  valid: true,
                  formErrors: false,
                  size: "60px",
              }),
              methods: {

                  submit() {
                      if(this.$refs.form.validate()) {
                          this.impactedTeams.forEach((elt)=>{
                              this.form.impactedTeams.push(elt)
                          })
                          this.submitIntake(this.form)
                      } else {
                          this.formErrors = true
                      }
                  },



                 addJob() {
                            let form = {RequestorName: this.RequestorName,
                            NameOfRequest: this.NameOfRequest,
                            SelectedPrioritizedInitiative: this.SelectedPrioritizedInitiative,
                            RequestDescription: this.RequestDescription,
                            PrimaryIntentTeam: this.PrimaryIntentTeam,
                            CPStrategy: this.CPStrategy,
                            CPProductOpsTeams: this.CPProductOpsTeams,
                            CPTechPods: this.CPTechPods,
                            CPExternalTeams: this.CPExternalTeams,
                            BusinessValue: this.BusinessValue,
                            TimeCriticality: this.TimeCriticality,
                            RiskReduction: this.RiskReduction,};

                            const encodeForm = (data) => {

                            return Object.keys(data)

                            .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))

                            .join('&');

                            }

                        // make ajax request and pass the data. I'm not certain how to do it with axios but something along the lines of this
                        axios.post('https://rocket-tools-dev.cloud.capitalone.com/api/data/submitCpIntake', 
                        (JSON.stringify(form)))
                            .then(res => {
                          console.log(res)
                          }
                        )
                      .catch(error => {
                      console.log(error)
                      });
                    }


              },



            }
            </script>

我希望我的提交按钮调用我的addJob方法，将表单中的数据添加到POST请求中，然后查看回显返回我提交的内容

Answer 1

我开始工作了！！！非常感谢所有致力于我的代码而不是我的问题格式化能力的积极贡献者

这是我必须解决的问题。

在./src目录下创建一个名为 plugins 的文件夹
内部插件文件夹创建 axios.js ，我在 axios.js 中输入的代码是

从“ axios”导入axios_http

//在此处插入所有axios逻辑

export const axios = axios_http

导出默认值{ 安装（Vue，选项）{ Vue.prototype。$ axios = axios_http } }

然后我必须在带有此代码的html之后的vue.js组件中的脚本顶部包括axios插件

从'@ / plugins / axios'导入{axios}

最后，我编辑了我的方法，在this.from.inserts中将变量添加为在变量之前包含对象名称。（insertVariableNameHere）我将在下面放置我的工作方法

addJob（e）{

            axios.post('https://rocket-tools-dev.cloud.capitalone.com/api/data/submitCpIntake', {
                RequestorName: this.form.RequestorName,
            NameOfRequest: this.form.NameOfRequest,
            SelectedPrioritizedInitiative: this.form.SelectedPrioritizedInitiative,
            RequestDescription: this.form.RequestDescription,
            PrimaryIntentTeam: this.form.PrimaryIntentTeam,
            CPStrategy: this.form.CPStrategy,
            CPProductOpsTeams: this.form.CPProductOpsTeams,
            CPTechPods: this.form.CPTechPods,
            CPExternalTeams: this.form.CPExternalTeams,
            BusinessValue: this.form.BusinessValue,
            TimeCriticality: this.form.TimeCriticality,
            RiskReduction: this.form.RiskReduction
            })
            .then(function (response) {
                console.log(response)
            })
            .catch(function (error) {
                console.log(error)
            });
    }

未为axios api POST定义的VueJs表单变量

1 个答案: