Tentei reproduzir teu código no snippet abaixo. Pelo que pude perceber tem dois erros mais graves que impedem o funcionamento.
Na linha:
searchString.map(searchString => searchString.trim().toLowerCase());
O método Array.map()
retorna um novo array com o resultado do callback aplicado a todos os elementos do array. No seu caso, você está fazendo o cálculo e não está guardando o resultado em uma variável.
Na linha:
item.nome.toLowerCase().indexOf(searchString)
O método String.indexOf()
procura uma ocorrência de uma substring em outra string, mas pela lógica do seu código me parece que você quer usar o Array.indexOf()
que tem função semelhante, porém procura pela ocorrência dentro de um array. Então acredito que o que você quer usar nessa linha seja:
searchString.indexOf(item.nome.toLowerCase())
EDIT
Modifiquei o código para se comportar como um LIKE
e como um OR
. A função ficou assim:
function produtosFiltrados() {
let sanitize = str => str.trim().toLowerCase();
let strings = this.myGlobalStuff.searchArray.map(sanitize);
return this.produtos.filter(function(item) {
let nome = sanitize(item.nome);
return strings.some(str => ~nome.indexOf(str));
});
}
Explicação do código:
let sanitize = str => str.trim().toLowerCase();
Apenas salva a função que sanitiza as string, pois ela é usada mais de uma vez no código. Esta função poderia estar em outro lugar, fora da computedProperty
(talvez até devesse).
let strings = this.myGlobalStuff.searchArray.map(sanitize);
Sanitiza todos os termos de pesquisa antes de usá-los.
return this.produtos.filter(function(item) {
let nome = sanitize(item.nome);
return strings.some(str => ~nome.indexOf(str));
});
É aqui onde tudo acontece:
this.produtos.filter(...)
vai retornar um array apenas com os elementos cuja função retorne um valor truthy (que, quando convertido para boolean é verdadeiro). Ex.:
// Filtra apenas os números ímpares
[0, 1, 2, 3].filter(x => x % 2) // [1, 3]
strings.some(...)
, o método Array.some(function)
aplica a function
nos elementos do Array
e retorna true
se qualquer um dos retornos da função seja truthy. Ou seja, funciona como um OR
(e o Array.every(function)
funciona como um AND
, apenas para curiosidade). Ex.:
// Testa se tem algum número ímpar no array
[0, 1, 2, 3].some(x => x % 2) // true
[0, 2, 4, 6].some(x => x % 2) // false
~nome.indexOf(str)
, o método String.indexOf(substring)
retorna a posição da substring dentro da string ou -1 caso a substring não exista dentro da string. Dito isso, para sabermos se a substring foi encontrada basta testarmos se x.indexOf(y) !== -1
, porém, como curiosidade, se você converter -1 para uma representação binária você vai perceber que é um binário exatamente oposto do 0 (Ver sobre complemento de 2).
(-1 >>> 0).toString(2) // "11111111111111111111111111111111"
(0).toString(2) // "00000000000000000000000000000000"
Para entender o >>> 0
veja esta resposta do SOEn
Então se você aplicar um NOT
binário (com o operador ~
), qualquer número diferente de -1 será !== 0
que é um valor truthy e o -1 será falso. Então, na conversão para boolean
:
x.indexOf(y) !== -1
É equivalente a:
~x.indexOf(y)
Então a função:
return this.produtos.filter(function(item) {
let nome = sanitize(item.nome);
return strings.some(str => ~nome.indexOf(str));
});
Significa:
Filtre todos os produtos cujo nome contenha qualquer um dos termos de pesquisa.
Código funcionando:
new Vue({
el: '#app',
data: {
myGlobalStuff: { // fake da Global
searchArray: ["1", "5"]
},
produtos: [
{id: 1, nome: "Produto 1"},
{id: 2, nome: "Produto 2"},
{id: 3, nome: "Produto 3"},
{id: 4, nome: "Produto 4"},
{id: 5, nome: "Produto 5"},
{id: 6, nome: "Produto 6"},
]
},
computed: {
produtosFiltrados: function() {
// Salva a função apenas por praticidade
let sanitize = str => str.trim().toLowerCase();
let strings = this.myGlobalStuff.searchArray.map(sanitize);
return this.produtos.filter(function(item) {
let nome = sanitize(item.nome);
return strings.some(str => ~nome.indexOf(str));
});
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<strong>Produtos</strong>
<ul>
<li v-for="p in produtos" :key="p.id">
[{{ p.id }}] {{ p.nome }}
</li>
</ul>
<strong>Produtos Filtrados</strong>
<ul>
<li v-for="p in produtosFiltrados" :key="p.id">
[{{ p.id }}] {{ p.nome }}
</li>
</ul>
</div>