Vue: Trying to get a dropdown for an address state to autocomplete in Chrome

Question

I am trying to get the dropdown to autocomplete. I have a saved address in Chrome but the only field that is not autocompleting is the dropdown for state.
The options are listing correctly but it's just not autocompleting it.

export default {
        data() {
            return {
               selectedState: null,
               states: [
                    {label: 'California', code: "CA"},
                    {label: 'New York', code: "NY"},
               ]
            }
        }

<select name="state" autocomplete="state">
    <option
        v-for="state in states" v-bind:value="selectedState">
        {{ state.label }}
      </option>
</select>

Answer 1

I think you want something like this

<select v-model="selectedState" name="state" autocomplete="address-level1">
  <option disabled value="">Select a state</option>
  <option v-for="state in states" :key="state.code" :value="state.code">
    {{ state.label }}
  </option>
</select>

According to these docs, the autocomplete value you want for state is "address-level1".

This will bind the selected state code to your selectedState model.

---

If you want to bind the entire state model (eg { code, label }) to selectedState, use :value="state" instead.

In testing, I found this did not play well with the auto-fill feature.

See https://v2.vuejs.org/v2/guide/forms.html#Select