Question

我正在尝试获取Vue项目中select字段的值。我已经尝试了几件事，但仍有一些链接可供参考：

我仍然无法获得选择的值。无论如何，我可以在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);
}

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

更新：我忘了说我确实尝试在数据中将v-model="selectedOption"设置为selectedOption，但仍然无法获得该值：

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

但是当我从表单提交功能登录selectedOption表单时，我得到的是不确定的吗？ console.log(self.selectedOption);

Answer 1

您可以在vue data 函数中创建 form对象 ，而不使用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
    }
  }
}

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

1 个答案: