使用带有 html select 选项的 v-model

Question

I'm trying to have v-model notice which select option a user has clicked on but it's not working and staying as null. My select field is a selection of the 50 US states and it is its own component in a separate file. I need v-model to notice the current value that is selected in order to send it back to a database and store the value.

Inside the form

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

The Select Box component

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

Answer 1

As docs said, By default, v-model on a component uses value as the prop and input as the event. So you need the value and input event to change the 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>

Answer 2

In you select component use v-modal as below

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

And inside the form you just call

<SelectBox/>

You can't use v-model in the component. only form controll select will get this modal value.