Question

我正在为一个对象数组进行过滤。

我有一个包含带有名为tags的属性的对象的数组以及我稍后将使用的一系列标签。

我的数据（）如下所示：

data() {
  return {
    tags: ['red', 'green', 'blue'],
    works: [
      {
        id: 1,
        name: 'one',
        img: '',
        tags: ['red', 'green']
      },
      {
        id: 2,
        name: 'two',
        img: '',
        tags: ['red', 'blue']
      },
      {
        id: 3,
        name: 'three',
        img: '',
        tags: ['green', 'blue']
      },
      {
        id: 4,
        name: 'four',
        img: '',
        tags: ['green']
      },
      {
        id: 5,
        name: 'five',
        img: '',
        tags: ['red']
      },
      {
        id: 6,
        name: 'six',
        img: '',
        tags: ['blue']
      },
    ],
  }
}

在模板上的

y迭代一些带有这样的标签的按钮：

<button v-for="(tag, tagInd) in tags" :key="tagInd" @click="filterBy(tag)">{{tag}}</button>

正如您所看到的，按钮上有一个方法可以将标记作为参数传递。

该方法的目的是返回在tags属性上具有filterBy（tag）方法传递的标记的所有对象。

方法如下：

methods: {
  filterBy(tag) {
    let filtered = ''; 
    filtered = this.works.filter(
      elem => { 
        return elem.tags.indexOf(tag) 
      }
    );
    console.log(filtered);
  }
},

但是发生了一些奇怪的事情，并且该方法返回所有没有将标记作为参数传递给tags属性的对象。我做错了什么？

Answer 1

目前，您传递给filter方法的回调只是返回elem.tags.indexOf(tag)的值。如果在调用它的数组中找不到参数值，indexOf方法将返回-1。

这意味着如果tag不在tags数组中，则回调函数将返回-1。并且tag值不会被过滤掉，因为-1被类型强制转换为布尔值true（请参阅!!(-1) === true）。

此外，如果tag是数组的第一个元素，indexOf方法将返回0。因此tag值将过滤掉，因为0被类型强制转换为布尔值false（请参阅!!(0) === false）。< / p>

这就是说：您只需要明确检查indexOf调用返回的值是否不等于-1：

filtered = this.works.filter(elem => {
  return elem.tags.indexOf(tag) !== -1;
});

Vuejs filterBy（）返回不正确的值

1 个答案: