Question

我以这种方式在json中有一个结构（我无法更改此json中的数据）：

    itens: {"countcats":2,"countsubcats":7,
            "catsubcatsdata":{
                "15978738e6cd1e":{"title":"Test 1","description":"blablabla",
                    "subcats":{
                        "1597873b1653d9": {"codurl":"t01url","title":"Teste subiten 1","description":""},
                        "1597873bd76c80": {"codurl":"t01url2","title":"Testing sub two","description":""},
                        "1597873c9d4a81": {"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"},
                        }},
                "15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet",
                    "subcats":{
                        "159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},
                        "159787472eb5e6":{"codurl":"donecorci ","title":"Donec hendrerit orci","description":""},
                        "15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum", "description":""},
                        "159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum. Quisque efficitur nec sapien eu ultricies"}
                        }}
                }}

我有以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
	<input type="text" placeholder="Search" v-model="searchQuery">

  <ul>
    <li v-for="(value, key) in filteredList">
          <b>{{ value.title }}</b><br>{{ value.description }}
			<ul>
			  <li v-for="(vsub, keysub) in value.subcats"><a v-bind:href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a></li>
			</ul>
    </li>
  </ul>
</div>

<script>
    new Vue({
        el: '#v-for-sectors',
        data: {
            searchQuery: '',
            itens: {"catsubcatsdata":{"15978738e6cd1e":{"title":"Test 1","description":"blablabla","subcats":{"1597873b1653d9":{"codurl":"t01url","title":"Teste subiten 1","description":""},"1597873bd76c80":{"codurl":"t01url2","title":"Testing sub two","description":""},"1597873c9d4a81":{"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"}}},"15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet","subcats":{"159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},"159787472eb5e6":{"codurl":"donecorci","title":"Donec hendrerit orci","description":""},"15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum","description":""},"159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum."}}}}}
		},
        computed: {
            filteredList: function () {
              var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
              var data = this.itens.catsubcatsdata
              var dataarray =  Object.keys(data)
          
          if (!filterKey) { return data; }
  
          return dataarray
                .filter(function(key) {
                  var row = data[key];

                  return Object.keys(row)
                    .some(function(key) {
                      return String(row[key])
                        .toLowerCase()
                        .indexOf(filterKey) > -1;
                    })
                })
                .reduce(function(acc, key) {
                  acc[key] = data[key];

                  return acc;
                  }, {})
            }
        }
    });
</script>

在搜索中输入有关标题或类别描述的内容时，我希望这样：

（这已经在起作用。）

但是当该单词来自子类别的标题或描述时，它应显示：

（这不起作用。）

有人可以帮助我完成这项工作吗？

Answer 1

据我了解，您想按搜索字词进行过滤，包括与顶级title或description匹配的所有条目的整个条目，或仅包括顶级且仅匹配的子级别，如果匹配在子级别而不是顶级级别，则匹配。

因此，我首先创建了一个方法matches，以使代码不会混乱。然后，我进行了计算以将感兴趣的值作为列表返回。然后，我根据上面的条件进行了计算以过滤这些值，并构造了一个仅具有匹配子猫的新对象，这正是匹配的地方。

new Vue({
  el: '#v-for-sectors',
  data: {
    searchQuery: '',
    itens: {
      "catsubcatsdata": {
        "15978738e6cd1e": {
          "title": "Test 1",
          "description": "blablabla",
          "subcats": {
            "1597873b1653d9": {
              "codurl": "t01url",
              "title": "Teste subiten 1",
              "description": ""
            },
            "1597873bd76c80": {
              "codurl": "t01url2",
              "title": "Testing sub two",
              "description": ""
            },
            "1597873c9d4a81": {
              "codurl": "t01url3",
              "title": "Test sub 3",
              "description": "blablabla 01"
            }
          }
        },
        "15978745b32c1b": {
          "title": "Loren Ipsun",
          "description": "lamet dectoid samet",
          "subcats": {
            "159787464bc887": {
              "codurl": "maecenas",
              "title": "Maecenas pulvinar",
              "description": "orci non volutpat varius"
            },
            "159787472eb5e6": {
              "codurl": "donecorci",
              "title": "Donec hendrerit orci",
              "description": ""
            },
            "15978748b89bca": {
              "codurl": "massadictum",
              "title": "Nullam eu massa dictum",
              "description": ""
            },
            "159787495492f4": {
              "codurl": "ultricies",
              "title": "Etiam massa arcu",
              "description": "Donec ultricies porttitor augue quis dictum."
            }
          }
        }
      }
    }
  },
  methods: {
    matches(obj) {
      const term = this.searchQuery.toLowerCase();

      return obj.title.toLowerCase().includes(term) || obj.description.toLowerCase().includes(term);
    }
  },
  computed: {
    listValues() {
      return Object.values(this.itens.catsubcatsdata);
    },

    filteredList() {
      if (!this.searchQuery) {
        return this.listValues;
      }

      return this.listValues
        .map((v) => {
          if (this.matches(v)) {
            return v;
          }

          const matchingSubcats = Object.values(v.subcats)
            .filter((v) => this.matches(v));
            
          if (matchingSubcats.length > 0) {
            return Object.assign({}, v, {subcats: matchingSubcats});
          }
        })
        .filter((v) => v);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
  <input type="text" placeholder="Search" v-model="searchQuery">
  <ul>
    <li v-for="value in filteredList">
      <b>{{ value.title }}</b><br>{{ value.description }}
      <ul>
        <li v-for="(vsub, keysub) in value.subcats"><a v-bind:href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a></li>
      </ul>
    </li>
  </ul>
</div>

如何使用vue.js对多维json对象进行搜索过滤

1 个答案: