Вот JSFiddle, который я создал для вас, чтобы он работал
Я пытаюсь проверить форму 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 и затем увидела, что эхо возвращает то, что я отправила