时间戳

首页 > 解决方案 > Vue js：如何过滤嵌套数组中的每个标签都包含在用户输入标签数组中的数组？

javascript - Vue js：如何过滤嵌套数组中的每个标签都包含在用户输入标签数组中的数组？

问题描述

如果搜索标签数组中的任何一个标签包含在项目的标签数组中，我有一个搜索函数来过滤数组。如果存在任何标签，而不是使用 some() 返回 true，如果每个标签都存在，我如何返回true？

这是我所拥有的一个示例（有效）。如果我搜索“tag1;” 和“tag3;”，它返回所有 3 个项目。我想要的只是 item1 和 item2 返回 true。

<template>
     <div class="right-content">
          <div class="nav-margin">
               <p>Filter array</p>
               <input type="text" v-model="searchTag" @keyup="addSearchTag" />
               <div class="spacer-20"></div>
               <div v-for="searchTag in searchTags" :key="searchTag" class="items">{{searchTag}}</div>
               <div class="spacer-20"></div>
               <div v-for="item in searchedItems" :key="item.name" class="items">
                    <div class="title">{{item.name}}:</div>
                    <div v-for="tag in item.tags" :key="tag" class="tag">{{tag}}</div>
               </div>
          </div>
     </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { computed } from '@vue/runtime-core';

export default {
     name: "TemplatesDash",
     setup() {
          const searchTag = ref("");
          const searchTags = ref([])
          const filteredItems = ref(null)

          let items = [
                    { name: "item1", tags: ["tag1;", "tag2;", "tag3;"] },
                    { name: "item2", tags: ["tag1;", "tag3;"] },
                    { name: "item3", tags: ["tag2;", "tag3;"] },
               ];

          const addSearchTag = (e) => {
               if (e.key === ";" && searchTag.value) {
                    if (!searchTags.value.includes(searchTag.value)) {
                         searchTags.value.push(searchTag.value);
                    }
                    searchTag.value = "";
               }
          };
          
          const searchedItems = computed(() => {
               filteredItems.value = items;

               if (searchTags.value.length) {
                    filteredItems.value = filteredItems.value.filter((item) => {
                         return item.tags.some(
                              (r) => searchTags.value.indexOf(r) !== -1
                         );
                    });
               }

               return filteredItems.value
          });
     
          
          return { searchTag, searchedItems, searchTags, addSearchTag, };
     },
};
</script>

我是 javascript 的新手，所以任何帮助或指向正确的方向都会很棒。

谢谢

标签： javascriptarraysvue.js

解决方案

我相信.every() 函数在这里可能有用。当您在 searchedItems 计算函数中过滤项目时，返回对 searchTags 的 .every() 调用，返回 item.tags .includes()是否每个 searchTag 数组成员。

 const searchedItems = computed(() => {
     filteredItems.value = items;

     if (searchTags.value.length) {
          filteredItems.value = filteredItems.value.filter((item) => {
               return searchTags.value.every(t => item.tags.includes(t));
          });
     }

     return filteredItems.value
});

你的 javascript 有了一个很好的开始！希望这可以帮助！

推荐阅读