Vue2实现点击字母显示开头匹配元素及自动刷新问题

1. 解决过滤逻辑失效（显示包含字母而非开头字母的元素） #

当前存在两个核心问题：

• 模板遍历的是原始beers数组，未使用定义好的过滤计算属性
• startsWith未处理大小写匹配差异，导致部分首字母小写的啤酒名称无法正确匹配

修复步骤：

1. 修改模板中的遍历源，替换为计算属性：

<v-col v-for="beer in filteredBeers" :key="beer.id" cols="6">

2. 优化计算属性的过滤逻辑，统一大小写避免匹配误差：

computed: {
  filteredBeers: function () {
    const targetLetter = this.letter.toLowerCase()
    return this.beers.filter(beer => {
      return beer.name.toLowerCase().startsWith(targetLetter)
    })
  },
},

2. 实现点击字母后自动刷新数据 #

Vue Router默认会复用同一路由组件，仅路由参数变化时不会重新触发created钩子，因此需要监听路由参数变化来重新请求数据：

1. 抽离请求逻辑为独立方法，便于复用
2. 添加路由参数监听，参数变化时重新请求数据

修改后的脚本部分：

import axiosClient from '@/axiosClient'

export default {
  data() {
    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
    return {
      letter: this.$route.params.letter,
      beers: [],
      letters,
    }
  },
  created() {
    this.fetchBeers()
  },
  watch: {
    '$route.params.letter'(newLetter) {
      this.letter = newLetter
      this.fetchBeers()
    }
  },
  methods: {
    fetchBeers() {
      axiosClient.get(`beers?beer_name=${this.letter}`).then(response => {
        this.beers = response.data
      })
    }
  },
  computed: {
    filteredBeers: function () {
      const targetLetter = this.letter.toLowerCase()
      return this.beers.filter(beer => {
        return beer.name.toLowerCase().startsWith(targetLetter)
      })
    },
  },
}

额外说明：如果后端API支持前缀搜索参数（例如beer_name__startswith），建议直接修改请求URL使用后端过滤，能减少前端数据处理压力并提升性能。

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