Vue.js数组过滤失效，输入‘Raccoon’未返回预期结果求解决

嘿，我来帮你排查这个问题！看起来你的过滤逻辑本身是对的，但有几个常见的坑可能导致你遇到的情况，咱们一步步来捋：

• 检查computed属性是否正确返回过滤结果
  很多时候开发者会不小心漏掉return语句，导致computed属性无法返回过滤后的数组，最终使用的还是原数组内容。你的代码应该确保返回过滤结果：

  computed: {
    filteredAnimals() {
      const filteredData = this.animalData.Animals;
      // 必须return过滤后的数组
      return filteredData.filter(item => 
        item.animal_list.some(elem => 
          elem.animal_title.toLowerCase().indexOf(this.animalTitle.toLowerCase()) !== -1
        )
      );
    }
  }
  

  如果没有return，computed属性不会输出过滤后的结果，自然会显示所有对象。

• 确认模板引用的是过滤后的computed属性
  确保你的模板循环的是computed生成的过滤数组，而不是原始的animalData.Animals：

  <div v-for="item in filteredAnimals" :key="item.date_time">
    <!-- 渲染内容 -->
  </div>
  

  如果不小心写成了循环原数组，那不管过滤逻辑如何，都会显示所有数据。

• 检查animalTitle的绑定是否正确
  确保输入框通过v-model正确绑定到animalTitle，并且在data中声明该属性：

  <input v-model="animalTitle" placeholder="输入动物名称">
  

  data() {
    return {
      animalTitle: '',
      animalData: { /* 你的测试数据 */ }
    }
  }
  

  如果绑定错误（比如拼写错误成animal_title），animalTitle的值不会随输入更新。要是animalTitle一直是空字符串，indexOf("")会在任何字符串中返回0，导致所有项都被匹配，最终显示全部对象。

• 处理可能的空格或隐藏字符
  输入内容可能带有前后空格，影响匹配结果。可以在过滤前先对搜索关键词做trim处理：

  computed: {
    filteredAnimals() {
      const searchTerm = this.animalTitle.trim().toLowerCase();
      const filteredData = this.animalData.Animals;
      return filteredData.filter(item => 
        item.animal_list.some(elem => 
          elem.animal_title.toLowerCase().indexOf(searchTerm) !== -1
        )
      );
    }
  }
  

最可能的原因是computed属性遗漏了return语句，或者模板错误引用了原数组。先检查这两点，应该就能解决问题啦！

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