Vue: Попытка получить выпадающее для состояния адреса для автозаполнения в Chrome

Question

Я пытаюсь получить выпадающее меню для автозаполнения. У меня есть сохраненный адрес в Chrome, но единственное поле, которое не является автозаполнением, - это раскрывающийся список состояний.
Параметры перечислены правильно, но это не автозаполнение.

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

Я думаю, вы хотите что-то вроде этого

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

Согласно этим документам , значение autocomplete, которое вы хотите указать для состояния, равно "address-level1" .

Это свяжет выбранный код состояния с вашей selectedState моделью.

---

Если вы хотите связать всю модель состояния (например, { code, label }) с selectedStateвместо этого используйте :value="state".

При тестировании я обнаружил, что не хорошо работает с функцией автозаполнения.

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