Vuetify中v-text-field设置autocomplete="false"仍无法禁用自动补全如何解决？

多数现代浏览器对autocomplete="false"的识别兼容性不足，因此即使配置了该属性仍可能触发自动补全，可通过以下方案解决：

• 方案1：替换autocomplete属性值
  将原有autocomplete="false"替换为autocomplete="off"，如果仍然失效，可以使用浏览器无法识别的非标准字段值，例如autocomplete="nope"，浏览器无法匹配到预设的补全字段类型就不会触发补全逻辑。
  代码示例：

  <v-text-field
    outlined
    placeholder="Search"
    autocomplete="nope"
    v-model="searchBar"
    @input="search()"
    :hint="searchResults.length + ' ' + this.searchResultTag + ' found'"
  ></v-text-field>
  

• 方案2：添加自定义name属性
  浏览器通常会通过字段的name属性判断字段类型，进而触发对应场景的自动补全。给组件添加和搜索、账号、地址等常见字段无关的自定义name值即可规避：

  <v-text-field
    outlined
    placeholder="Search"
    autocomplete="off"
    name="customSearchField"
    v-model="searchBar"
    @input="search()"
    :hint="searchResults.length + ' ' + this.searchResultTag + ' found'"
  ></v-text-field>
  

• 方案3：外层表单添加全局配置
  如果输入框包裹在form标签内，直接在form标签上添加autocomplete="off"，作用于所有内部表单元素：

  <form autocomplete="off">
    <v-text-field
      outlined
      placeholder="Search"
      v-model="searchBar"
      @input="search()"
      :hint="searchResults.length + ' ' + this.searchResultTag + ' found'"
    ></v-text-field>
  </form>
  

• 方案4：只读属性临时限制
  初始给输入框设置readonly属性，用户第一次点击输入框时再移除该属性，可避免页面初始化时浏览器自动触发补全：

  <template>
    <v-text-field
      outlined
      placeholder="Search"
      autocomplete="off"
      :readonly="isReadonly"
      @focus="isReadonly = false"
      v-model="searchBar"
      @input="search()"
      :hint="searchResults.length + ' ' + this.searchResultTag + ' found'"
    ></v-text-field>
  </template>
  <script>
  export default {
    data() {
      return {
        isReadonly: true,
        searchBar: '',
        // 其他原有数据
      }
    }
  }
  </script>
  

内容的提问来源于stack exchange，提问作者Joseph