javascript - 过滤器在 Vue.js 中不起作用。我该如何修复它？

Question

我正在尝试使用 Vue.js 中的数据过滤数组。我在计算属性中这样做。这是测试数组:

{
    "Animals": [
        {
            "date_time": "2011.08.31",
            "animal_list": [
                {
                    "animal_title": "Monkey"
                },
                {
                    "animal_title": "Giraffe"
                }
            ]
        },
        {
            "date_time": "2012.08.31",
            "animal_list": [
                {
                    "animal_title": "Raccoon"
                },
                {
                    "animal_title": "Giraffe"
                }
            ]
        }
    ]
}

这是我的过滤功能:

filteredData.filter(item =>
        item.animal_list.some(
          elem =>
            elem.animal_title
              .toLowerCase()
              .indexOf(this.animalTitle.toLowerCase()) != -1
        )
      );

看起来不错，但行不通。当我在表单中输入“Raccoon”时，它必须仅返回第二个对象，但它会返回所有对象。

为什么会发生这种情况？我做错了什么？

UPD:filteredData 是一个数组。 filteredData = AnimalData.Animals

Answer 1

尝试重现您的问题，但在我的 fiddle 中它按预期工作:

const data = {
    "Animals": [
        {
            "date_time": "2011.08.31",
            "animal_list": [
                {
                    "animal_title": "Monkey"
                },
                {
                    "animal_title": "Giraffe"
                }
            ]
        },
        {
            "date_time": "2012.08.31",
            "animal_list": [
                {
                    "animal_title": "Raccoon"
                },
                {
                    "animal_title": "Giraffe"
                }
            ]
        }
    ]
};

const filtering = () => {
  const filteredData = data.Animals;
  const animalTitle = "Giraffe";

    return filteredData.filter(
        item => item.animal_list.some(
        elem => elem.animal_title.toLowerCase().indexOf(animalTitle.toLowerCase()) !== -1)
    );
}

const result = filtering();
console.log(result);

https://jsfiddle.net/Kenvdb/tq5zk79w/

** 更新 **将 Fiddle 更改为 Vue JS 组件以说明解决方案。