如何阻止LastPass扩展自动填充搜索表单字段？

试试下面几种针对性的方案，都是适配Vue/BootstrapVue场景的实用方法：

• 叠加LastPass专属忽略属性
  除了data-lpignore="true"，同时添加autocomplete="off"和data-lpformignore="true"，覆盖LastPass的多维度识别逻辑：

  <b-form-input
    v-model="filter"
    data-lpignore="true"
    data-lpformignore="true"
    autocomplete="off"
    type="search"
    placeholder="Type to Search"
  />
  

• 动态绑定忽略属性
  部分场景下Vue编译会过滤静态自定义属性，改用v-bind动态绑定确保属性被正确渲染：

  <b-form-input
    v-model="filter"
    :data-lpignore="true"
    :autocomplete="'off'"
    type="search"
    placeholder="Type to Search"
  />
  

• 修改字段标识属性
  LastPass会通过name/id字段名识别输入框类型，将其改为与账号无关的名称，避免触发自动填充：

  <b-form-input
    v-model="filter"
    name="search-content-filter"
    id="search-content-filter"
    data-lpignore="true"
    type="search"
    placeholder="Type to Search"
  />
  

• 插入原生Input模板
  如果BootstrapVue组件的属性传递仍有问题，直接通过插槽插入原生input并配置忽略属性：

  <b-form-input
    v-model="filter"
    type="search"
    placeholder="Type to Search"
  >
    <template #default="{ attrs, listeners }">
      <input
        v-bind="attrs"
        v-on="listeners"
        data-lpignore="true"
        autocomplete="off"
        class="form-control"
      />
    </template>
  </b-form-input>
  

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