Vuejs 2.0多类别过滤器

Question

我需要使用vuejs 2进行多类别过滤。我为此做了一些努力，但过滤过程无效。

我知道如何使用计算方法进行过滤操作。

当我尝试这个时，我只能列出单个类别的数据。如果我选​​择另一个类别，数据就会出现空白。我不明白我在哪里犯错误？

我的例子：https://jsfiddle.net/a3x374qy/9/

printf("%0*li", (int) strlen(s), temp);

new Vue({
  el: '#app',
  data: {
    checkedEatCategories:[],
    eatCategories : [
      {
      	id:1,
        title: 'Category 1',
      },{
      	id:2,
        title: 'Category 2',
      },{
      	id:3,
        title: 'Category 3',
      },{
      	id:4,
        title: 'Category 4',
      },{
      	id:5,
        title: 'Category 5',
      }
    ],
    posts: [
      {
        id:1,
        title:'Product 1',
        eat_categories: [
        	{
          	id:1,
          }
        ]
      },
      {
        id:2,
        title:'Product 2',
        eat_categories: [
        	{
          	id:1,
          },
          {
          	id:2,
          },
          {
          	id:3,
          }
        ]
      },
      {
        id:3,
        title:'Product 3',
        eat_categories: [
        	{
          	id:1,
          },
          {
          	id:5,
          }
        ]
      }
    ]
  },
  computed: {
  	filteredPlaces: function () {
       return this.posts.filter((j) => {
                   return (j.eat_categories.includes(this.checkedEatCategories));
                });
            }
  }
})

Answer 1

这里有几个问题。

1. 您在模板中循环显示posts而不是filteredPlaces

2. .includes()不接受数组。尝试将其与.some()

结合使用

new Vue({
  el: '#app',
  data: {
    checkedEatCategories: [],
    eatCategories: [{
      id: 1,
      title: 'Category 1',
    }, {
      id: 2,
      title: 'Category 2',
    }, {
      id: 3,
      title: 'Category 3',
    }, {
      id: 4,
      title: 'Category 4',
    }, {
      id: 5,
      title: 'Category 5',
    }],
    posts: [{
        id: 1,
        title: 'Product 1',
        eat_categories: [{
          id: 1,
        }]
      },
      {
        id: 2,
        title: 'Product 2',
        eat_categories: [{
            id: 1,
          },
          {
            id: 2,
          },
          {
            id: 3,
          }
        ]
      },
      {
        id: 3,
        title: 'Product 3',
        eat_categories: [{
            id: 1,
          },
          {
            id: 5,
          }
        ]
      }
    ]
  },
  computed: {
    filteredPlaces: function() {
      return this.posts.filter(post => 
        post.eat_categories.some(tag => 
          this.checkedEatCategories.includes(tag.id)
        )
      )
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li v-for="eatCategory in eatCategories">
      <label>
        <input type="checkbox" :value="eatCategory.id" v-model="checkedEatCategories">
        <span class="title">{{eatCategory.title}}</span>
     </label>
    </li>
  </ul>
  <ul>
    <li v-for="post in filteredPlaces">
      {{ post.title }}
    </li>
  </ul>
</div>