时间戳

首页 > 解决方案 > Vue：尝试在 Chrome 中获取地址状态的下拉列表以自动完成

vue.js - Vue：尝试在 Chrome 中获取地址状态的下拉列表以自动完成

问题描述

我正在尝试让下拉菜单自动完成。我在 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>

标签： vue.jsautofill

解决方案

我想你想要这样的东西

<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

推荐阅读