I'm struggling to send two fields to my backend, but every time I attempt to do so, both values end up as null in the backend.
I am uncertain about what mistake I might be making.
<template>
<div id="app">
<div>
<b-form-select
v-model="sport_id_form"
:options="sport_id_form_options"
class="mb-3"
value-field="item"
text-field="name"
></b-form-select>
<div class="mt-3">
:Selected
<strong>{{sport_id_form}}</strong>
</div>
<button type="button" class="btn btn-dark" v-on:click="get_sports">Get Sports</button>
</div>
</div>
</template>
<script>
export default {
middleware: ["auth"],
components: {},
data() {
return {
sport_id_form: [],
sport_id_form_options: [
{ item: null, name: "Please select an option" },
{ item: { "9": "Tennis" }, name: "Tennis" },
{ item: { "10": "Basketball" }, name: "Basketball" }
]
};
},
methods: {
async get_sports() {
if (this.errors.any()) {
return;
}
await this.$axios.post(
"api/sportsid/add_sports/",
this.sport_id_form + "/" + this.sport_id_form_options
);
this.$router.push("/");
}
}
};
</script>
When utilizing a form in this manner, everything functions correctly.
<script>
export default {
middleware: ["auth"],
data() {
return {
form: {
sport_id: "",
sport_name: ""
}
};
},
methods: {
async submit() {
if (this.errors.any()) {
return;
}
// check for validity, etc....
await this.$axios.post("/api/sportsid/add_sports/", this.form);
this.$router.push("/");
}
}
};
</script>
Submitting the form sends the data to the backend and triggers events based on the provided values.
Is there a way to post the data in the same structure as the form while using a dropdown selection?