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:

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

You declared `v-model="selectedOption"` in your `v-select` so why not using it in the script? — Bennett Dams, Sep 18 '18 at 16:18
hi, the value should be in 'selectedOption', which is the data property your v-model is utilizing — Ewomazino Ukah, Sep 18 '18 at 16:19
@BennettDams I forgot to include this method as one I attempted. I have updated — whla, Sep 18 '18 at 17:04
`console.log(self.selectedOption);` only works when you have `let self = this;` in the function. What's wrong with `console.log(this.selectedOption);`? — Bennett Dams, Sep 18 '18 at 17:10
@BennettDams That fixed being able to access selectedOption! JS newbie here mixing up languages. So now using `v-model` seems like the easiest option, but as an exercise is there anyway to get the selected item in FormData? Or is this not possible since select html elements are nested, whereas inputs are not? — whla, Sep 18 '18 at 17:28
@whla Vue follows a data-driven approach rather than accessing the DOM elements. That means that you can bind all necessary data/options of inputs via `v-model` - no need for FormData! You should really have a look at Vue's form input bindings https://vuejs.org/v2/guide/forms.html — Bennett Dams, Sep 18 '18 at 17:32
@BennettDams thanks for the link. So I should move away from using FormData all together, and use Vue's models. Got it! — whla, Sep 18 '18 at 17:44

score 0 · Answer 1 · edited Dec 17 '20 at 11:48

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

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

1 Answers1