Vue.js在对象数组中搜索

时间:2019-10-02 11:24:23

标签: javascript vue.js filter

我有这样的API Laravel响应:

{
id:1, 
name: "Text",
category: {
            id: 1,
            name: "Text 2",
          },
tags:[
       {
         id: 1,
         name: "Tag1",
       },
       {
         id: 2,
         name: "Tag2",
       },
     ],
},

对于我的前端(使用vuejs),我创建了一个简单的计算函数,用于根据用户对复选框的选择来过滤类别。

checkedCategory: []
.
.
let posts = this.posts;
if (typeof this.checkedCategory !== 'undefined' && this.checkedCategory.length > 0) {
          posts = posts.filter((post) => {
                     return this.checkedCategory.indexOf(post.category.name) > -1;})}

一切正常。帖子通过用户选择的类别进行过滤。

但是,帖子也可以有多个标签。 是一个对象数组,因此我用 .includes (而不是.filter)重新构造了该块,但返回的结果为空。

checkedTags: []
.
.
let posts = this.posts;
if (typeof this.checkedTags !== 'undefined' && this.checkedTags.length > 0) {
          posts = posts.includes((post) => {
                     return this.checkedTag.indexOf(post['tags']) > -1;})}

1 个答案:

答案 0 :(得分:0)

我认为这应该可行:

   public class Exam {
        private static void div(int i, int j) {
            try {
                System.out.println(i / j);
            } catch(ArithmeticException e) {
                Exception ex = new Exception(e);
                throw ex;
            }
        }
        public static void main(String[] args) {
            try {
                div(5, 0);
            } catch(Exception e) {
                System.out.println("END");
            }
        }
    }

基本上,它只会过滤let posts = this.posts; if (typeof this.checkedTags !== 'undefined' && this.checkedTags.length > 0) { posts = posts.filter(post => { return post.tags.some(tag => checkedTags.includes(tag.name)) }) } 数组中至少有一个标签的所有帖子。根据您的需要,您还可以使用checkedTags

检查帖子的所有tags是否都在那里