使用bootstrap vue b-form-select组件用axios发布两个字段值

Question

我试图将两个字段发布到后端，但当我尝试时，两个值在后端都为null。

不确定我在这里做错了什么。

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

如果我用这种方式创建一个表单，一切都会很好。

<script>
export default {
middleware: ["auth"],
data() {
return {
form: {
sport_id: "",
sport_name: ""
}
};
},
methods: {
async submit() {
if (this.errors.any()) {
return;
}
// check valid etc....
await this.$axios.post("/api/sportsid/add_sports/", this.form);
this.$router.push("/");
}
}
};
</script>

当我使用表单时，数据会进入后端并根据值触发事件。

如何以与表单相同的格式发布数据，但使用下拉选择？

Answer 1

更改形式

data() {
return {
sport_id_form: {
sport_id: "",
sport_name: ""
},
sport_id_form_options: [
{ item: null, name: "Please select an option" },
{ item: { "9": "Tennis" }, name: "Tennis" },
{ item: { "10": "Basketball" }, name: "Basketball" }
]
};
},

并选择

<b-form-select
v-model="sport_id_form.sport_id"
:options="sport_id_form_options"
class="mb-3"
value-field="item"
text-field="name"
></b-form-select>