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

Vue：试图让地址状态的下拉列表在 Chrome 中自动完成

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

autofill

vue.js