使用引导程序 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>