Javascript 使用带html选择选项的v模型

我试图让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>

陈述
阿拉巴马州
阿拉斯加州
亚利桑那州
阿肯色州
加利福尼亚
科罗拉多州
康涅狄格州
特拉华州
哥伦比亚特区
佛罗里达州
佐治亚州
夏威夷
爱达荷州
伊利诺伊州
印第安纳州
爱荷华州
堪萨斯州
肯塔基州
路易斯安那州
缅因州
马里兰
马萨诸塞州
密歇根
明尼苏达州
密西西比
密苏里州
蒙大拿
内布拉斯加州
内华达州
新罕布什尔州
新泽西州
新墨西哥州
纽约
北卡罗来纳州
北达科他州
俄亥俄州
奥克拉荷马
俄勒冈
宾夕法尼亚
罗德岛
南卡罗来纳州
南达科他州
田纳西州
得克萨斯州
犹他州
佛蒙特州
弗吉尼亚州
华盛顿
西弗吉尼亚州
威斯康星州
怀俄明州
导出默认值{
名称：“SelectBox”，
};
挑选{
字体大小：12px；
颜色：rgba（0,0,0,0.5）；
-webkit外观：menulist；
-莫兹外貌：美努利主义者；
边界半径：3px；
}

在中，选择组件使用v型模态，如下所示

<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模型。只有form controll select将获得此模式值。

如前所述，默认情况下，组件上的v-model将值用作道具，并将输入用作事件。因此，您需要

值

和

输入事件

来更改

值

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

...

导出默认值{
名称：“SelectBox”，
道具：{
值：字符串，
},
};

是否需要为父组件中使用的编写一些内容？选择框不需要任何更改<代码>很高兴你解决了这个问题。我在答案中添加了文档，这样您可以得到更好的答案。

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