如何在表单提交时获取 v-select 字段的值？

Question

我试图在我的 Vue 项目中获取选择字段的值。 我已经尝试了几件事，但我仍然有链接的一些事情是：

• https://codepen.io/johnjleider/pen/jwoNrG
• 使用 JavaScript 获取下拉列表中的选定值？

我仍然无法获得价值选择。 无论如何我可以在 FormData 对象中捕获选定的值吗？ 我认为这将使它最容易抓住。

在模板中：

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

在脚本中，我尝试了多种方法，但仍然没有结果：

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

有没有我缺少的最佳实践？ 任何帮助/建议将不胜感激。

更新：我忘了包括我确实尝试在数据中使用selectedOption设置v-model="selectedOption"但仍然无法获得值：

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

但是当我记录 selectedOption 表单时，我的表单提交功能未定义？ console.log(self.selectedOption);

Answer 1

您可以在 vue数据函数中创建一个表单对象，而不是使用 FormData。

在表单对象中，您可以声明所有具有表单输入值的属性。

然后您可以使用this.form访问提交功能上的表单对象

示例如下：

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