如何在选择表单中使用 v-model？答案

【问题标题】：How to use v-model inside select form?如何在选择表单中使用 v-model？
【发布时间】：2021-08-23 22:37:11
【问题描述】：

有什么方法可以在选择标签表单中获取 vuejs 中的选定选项。

就像我有这个标签一样，我可以得到

<input type="email" class="form-control" id="email" placeholder="name@example.com" autofocus v-model="email">

像这样我想在 vue3 中的 data() 中获取 select 下拉元素。我的选择元素如下

<div class="form-floating">
    <select class="form-select" >
        <option selected>Select your category</option>
        <option value="a">a</option>
        <option value="c">b-</option>
    </select>
</div>

而且它也在表单标签内。

如何获取它的数据并将其存储在 vuejs 中的数据中。

感谢您的帮助。

【问题讨论】：

你可以做到，<select class="form-select" v-model="selectedItem">

标签： vue.js vuejs3

【解决方案1】：

将 v-model 添加到局部反应变量：

<template>
<div class="form-floating">
    <select class="form-select" v-model="selectedCategory">
        <option value="none">Select your category</option>
        <option value="a">a</option>
        <option value="c">b-</option>
    </select>
</div>
  
  selectedCategory: {{selectedCategory}}
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  data () {
    return {
    selectedCategory: "none"
  }
  }
});
</script>

Vue SFC Playground

【讨论】：

您好，是否必须使用defineComponent 而不是仅导出默认值

【解决方案2】：

<template>
<select class="form-select" v-model="item">
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
</select>
</template>
export default{
...
data(){
return{
item: 'K'
}
}
}

在这里，您可以使用 v-modal="item" 选择值 K 的选项

【讨论】：