How can I get the value of v-select field on form submit?

Question

I am trying to get the value of a select field in my Vue project. I have tried several things but a few of the things I still have links for are:

• https://codepen.io/johnjleider/pen/jwoNrG
• Get selected value in dropdown list using JavaScript?

I still haven't been able to get the value select. Is there anyway I can capture the selected value in the FormData object? I would think this would make it the easiest to grab.

In template:

<v-form @submit.prevent="update" id="exapi">
            <v-select
              id="select"
              name="select"
              v-bind:items="selectOptions"
              v-model="selectedOption"
              label="Exchange"
              autocomplete
              >
            </v-select>
            <v-text-field
              name="input-api-input"
              label="Enter key"
              hint="Key"
              v-model="password"
              :append-icon="e1 ? 'visibility' : 'visibility_off'"
              :append-icon-cb="() => (e1 = !e1)"
              :type="e1 ? 'password' : 'text'"
              >
            </v-text-field>

            <v-btn
              color="secondary"
              :loading="loading"
              @click.native="loader = 'loading'"
              :disabled="loading"
              type="submit"
              >
              Change API Keys
            </v-btn>
</v-form>

In script I have tried multiple methods but still no result:

updateExchangeApi() {
  const form = new FormData(document.getElementById('exapi'));
  const key = form.get('input-api-input');
  const selectValue0 = form.get('select')
  const e = document.getElementById('exchange-select');
  const selectValue1 = e.options[e.selectedIndex].text;

  console.log('in updateExchangeApi()');
  // console.log(exchange);
  console.log(key);
}

Is there a best practice I am missing? Any help/advice would be greatly appreciated.

UPDATE: I forgot to include that I did try setting v-model="selectedOption" with selectedOption in data but still not able to get the value:

data: () => ({
  loader: null,
  LineChart,
  BarChart,
  UserTable,
  selectedOptions: [],
  selectedOption: '',
})

But when I log selectedOption form my form submit function I get undefined? console.log(self.selectedOption);

Answer 1

Instead of using FormData you can create a form object in vue data function.

Inside form object you can declare all the properties that will have the values of your form inputs.

Then you can access the form object on your submit function using this.form

Example Below:

<template>
     <v-form @submit.prevent="submit">
      <v-select
       v-model="form.selectedItems"
       :items="items"
       multiple
       label="Select"
       item-value="value.foo"
       item-text="text"
      ></v-select>
     <v-text-field v-model="form.text"></v-text-field>
     <v-btn type="submit">submit</v-btn>
   </v-form>
</template>

<script>
   export default {
    data: function () {
     return {
      items: [
       { text: "Item 1", value: { foo: "item", bar: 2 } },
       { text: "Item 2", value: { foo: "test", bar: 42 } },
       { text: "Item 3", value: { foo: "foobar", bar: 4 } },
      ],
      form: {
        selectedItems: [],
        text: "",
      },
    };
  },
  methods: {
    submit() {
      const formData = this.form;
      // log the form data
      console.log(formData);
      //... handle data here
    }
  }
}