Post two field values with axios using a bootstrap vue b-form-select component

Question

I'm trying to post two fields to my backend but when I try I get null in the backend for both values.

Not sure what I'm doing wrong here.

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

If I create a form this way everything works fine.

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

When I use the form the data goes to the backend and triggers events based on the values.

How can I post the data in the same format as the form but using a dropdown select?

Answer 1

Change the form

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" }
      ]
    };
  },

and select to

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