Vue.js 搜索功能选择历史搜索项时输入框数据显示异常问题

云原生阿岚

2026-10-28

问题根因

这个内容错位完全是模板里堆叠的链式数组处理逻辑导致的：
你渲染历史列表时，直接在v-for的表达式上对原始searchHistory串了3步操作：截取最后5条、反转数组顺序、给每个元素去除首尾空格。这套操作生成的是仅用于页面渲染的临时数组，和原始searchHistory的元素顺序、内容已经完全不一样了。
但你点击列表项的时候，把这个临时渲染数组的下标当成参数传给selectPreviousSearch，转头又拿这个下标去取原始searchHistory的元素，取到的内容自然和你点击的项对不上。

给你算个实际场景的匹配逻辑就很清楚：
你按顺序搜索a、b、c、d，原始searchHistory存储的内容就是['a', 'b', 'c', 'd']。经过.slice(-5).reverse()处理后，用于渲染的临时数组变成了['d', 'c', 'b', 'a']：

页面上显示为"a"的列表项，在临时数组里的索引是3
点击这个项时，传给selectPreviousSearch的index值就是3
方法里执行this.search = this.searchHistory[index]，取到的是原始数组里索引为3的元素也就是d，根本不是预期选中的"a"，正好对应你碰到的“点a却跳出其他不匹配内容”的异常。

另外你链式调用里的.map((s) => s.trim())还会带来额外的不一致：页面上渲染的是去除首尾空格后的历史值，但你从原始数组取到的是没做trim的存储原始值，就算索引没有错位，两个值也会存在差异。

解决方法

最稳妥、长期维护成本最低的改法，是避开“传渲染数组索引、回原始数组取值”的错位逻辑，直接把页面上实际渲染的列表项值作为参数传给点击回调：

先把堆在模板里的链式处理逻辑移到计算属性里统一维护，避免模板写冗长的表达式：

computed: {
  // 统一生成要展示的历史搜索列表
  displayHistory() {
    return this.searchHistory
      .slice(-5)
      .reverse()
      .map(item => item.trim())
  }
}

修改列表的渲染和点击事件，不再传递索引做跨数组取值，直接传递当前渲染的item值：

<ul class="list-inline">
  <li
    class="list-inline-item list-group-item-primary"
    v-for="(item, index) in displayHistory"
    :key="index"
    @click="selectPreviousSearch(item)"
  >
    {{ item }}
  </li>
</ul>

对应的selectPreviousSearch方法直接接收选中的值即可，无需绕弯从原始数组取数：

selectPreviousSearch(selectedValue) {
  // 直接把用户实际点击的内容填入搜索框
  this.search = selectedValue
  this.showSearchHistory = false
}

这种改法的优势是，不管你后续对原始历史数组增加多少排序、格式调整的逻辑，页面上渲染什么内容，点击时传给方法的值就是什么内容，从根源上避免索引错位的问题。
如果执意要保留传索引的写法，取值时必须取和模板处理逻辑完全一致的数组元素，不能直接读取原始searchHistory，否则只要调整了链式调用的顺序，就会再次出现错位问题，长期维护成本很高。

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