Vue js how to make a list filter if an element has multiple categories in an array?

Question

JavaScript

Hello, there is a small codepen of mine for training here:
https://codepen.io/msdoc11/pen/ZEJverK

If you specify a size for the product like this: size: "XL", that is, one parameter, then everything works.

If you specify an array size: ["XL", "XXL"], then it does not work. How to properly compare two arrays?

Now the code contains an array of data, so the size filter does not work.

Answer 1

computed: {
  filteredProducts() {
    const keyword = this.keyword.toLowerCase();

    return this.products.filter(item => (
      (item.name.toLowerCase().includes(keyword)) &&
      (!this.colors.length || this.colors.includes(item.color)) &&
      (!this.sizes.length || this.sizes.some(n => item.size.includes(n))) &&
      (!this.categories.length || this.categories.includes(item.category))
    ));
  },
  ...

UPD. The question, of course, was not about this, but it somehow hurts the eye ... The dimensions are okay, what they are known in advance and there are not many of them, but, let's say, colors - when the list of goods changes, you will manually view it and update the list of colors ? Can be calculated automatically:

computed: {
  colorFilter() {
    return Array
      .from(new Set(this.products.map(n => n.color)))
      .sort((a, b) => a.localeCompare(b));
  },
  ...