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>

根据these docs，您要用于状态的autocomplete值为“ address-level1”。

这会将选定的状态代码绑定到您的selectedState模型。

---

如果要将整个状态模型（例如{ code, label }）绑定到selectedState，请改用:value="state"。

在测试中，我发现此功能在自动填充功能中很好地发挥了作用。请参见https://vuejs.org/v2/guide/forms.html#Select