过滤器在 Vue.js 中不起作用。我该如何解决？答案

【问题标题】：filter doesn't work in Vue.js. How can I fix it?过滤器在 Vue.js 中不起作用。我该如何解决？
【发布时间】：2020-03-09 13:57:13
【问题描述】：

我正在尝试使用 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

【问题讨论】：

我猜this.animalTitle 在运行过滤器时是一个空字符串。打个断点看看。
查看this.animalTitle的值
@Jonathan，不，我在控制台中观看了。第一个对象为“假”，第二个对象为“真”。但它无论如何都不会过滤。
您应该始终使用三等号而不是 !=，例如 !==。在 JavaScript 中使用三等号 === 时，我们正在测试严格相等。这意味着我们要比较的类型和值必须相同。
@KennyDope 在这个问题之前对我来说从来都不是问题。但是好的，我改变了它......什么也没发生（

标签： javascript vue.js

【解决方案1】：

试图重现您的问题，但在我的小提琴中它按预期工作：

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 组件以说明解决方案。

【讨论】：

我明白了……但我不明白，我的项目出了什么问题。好的，无论如何，谢谢您的帮助）
控制台有错误吗？（请批准解决方案；））
不，我没有任何错误。它只是没有过滤到我这边。我会搜索一个问题。感谢您的帮助）批准了您的解决方案。