使用带有 html 选择选项的 v-model答案

【问题标题】：Using v-model with html select option使用带有 html 选择选项的 v-model
【发布时间】：2020-11-19 22:51:22
【问题描述】：

我正在尝试让 v-model 通知用户单击了哪个选择选项，但它不起作用并保持为空。我的选择字段是从美国 50 个州中选择的，它是单独文件中的一个组成部分。我需要 v-model 来注意选择的当前值，以便将其发送回数据库并存储该值。

表格内

<SelectBox v-model="editFormData.state" />

选择框组件

<template>
  <select name="state" id="state">
    <option value="" selected="selected">State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
  </select>
</template>

<script>
export default {
  name: 'SelectBox',
};
</script>

<style scoped>
select {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  border-radius: 3px;
}
</style>

【问题讨论】：

标签： javascript html database forms vue.js

【解决方案1】：

在你选择组件时使用如下的 v-modal

<select v-model="model" name="state" id="state">
    <option value="" selected="selected">State</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
</select>

在你刚刚调用的表单中

<SelectBox/>

您不能在组件中使用 v-model。只有表单控件选择会得到这个模态值。

【讨论】：

【解决方案2】：

正如docs 所说，默认情况下，组件上的 v-model 使用 value 作为 prop 和 input 作为事件。所以你需要value和input event来改变value

<select name="state" id="state" :value="value" @change="e => $emit('input', e.target.value)">
...
</select>

<script>
export default {
  name: 'SelectBox',
  props: {
    value: String,
  },
};
</script>

【讨论】：

有什么我必须为父组件中使用的写的吗？
SelectBox 不需要任何更改。 <SelectBox v-model="editFormData.state" />
很高兴您解决了这个问题。我在答案中添加了文档，然后您可以做得更好。