Vue js: How to filter an array where every tag in a nested array is included in an array of user entered tags?

Question

I have a search function that filters an array if any one of the tags in the search tags array are included in the item's tags array. Instead of using some() to return true if any tag is present, how can I return true if every tag is present?

Here's an example of what I have (which works). If I search "tag1;" and "tag3;", it returns all 3 items. What I want is only item1 and item2 to return 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>

I'm brand new to javascript so any help or pointing in the right direction would be great.

Thanks

Answer 1

I believe the .every() function may be useful here. When you filter the items in your searchedItems computed function, return an .every() call on searchTags, returning whether item.tags .includes() every searchTag array member.

 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 });

You're off to a great start with javascript! Hope this helps!