Vue.js computed property does not works with big array - arrays

Question

I have a computed property witch looks inside a items: {} array, this array have 26 objects inside. The property only "read" the first 23 objects, the 24 and the next ones looks out of the filter range.
Before this conclusion i think the problem is because the 24 object have an special character but i revert the array order and the special character was filter correctly.
items: [
{...},
23: {
alias: "Correcto",
id: 11
},
24: {
alias: "Tamaño",
id: 12
}
25: {
alias: "silla",
id: 13
]
};
This is the code of my filter as a computed: porperty
computed: {
filteredItems() {
if (this.items) {
return this.items.filter((item) => {
if (!this.search) return '';
return item.alias.toLowerCase().match(this.search.toLowerCase().trim());
});
}
}
},
How can i make the filter works with big arrays?

Answer 1

Array's filter method does not has a limitation, the problem here it's the .match() method which check by regex, replace it with .includes() which search if the string passed as parameter occours in the desired string.
.includes() Docs MDN
Little example emulating "large" data
new Vue({
el: '#example',
computed: {
filteredItems () {
return this.items.filter(i => i.alias.toLowerCase().includes(this.filterText.toLowerCase()))
}
},
data () {
return {
filterText: '',
items: [
{
alias: "it\'s working",
id: 1
},
{
alias: "lool",
id: 2
},
{
alias: "vue is awesome",
id: 3
},
{
alias: "another text",
id: 4
},
{
alias: "some value",
id: 5
},
{
alias: "teest",
id: 6
},
{
alias: "bar",
id: 7
},
{
alias: "foo",
id: 8
},
{
alias: "silla",
id: 9
},
{
alias: "Corrécto",
id: 10
},
{
alias: "Tamaño",
id: 11
},
{
alias: "ñoo",
id: 12
},
{
alias: "silla",
id: 9
},
{
alias: "Corrécto",
id: 10
},
{
alias: "Tamaño",
id: 11
},
{
alias: "ñoo",
id: 12
},
{
alias: "silla",
id: 9
},
{
alias: "Corrécto",
id: 10
},
{
alias: "Tamaño",
id: 11
},
{
alias: "ñoo",
id: 12
},
{
alias: "silla",
id: 9
},
{
alias: "Corrécto",
id: 10
},
{
alias: "Tamaño",
id: 11
},
{
alias: "ñoo",
id: 12
},
{
alias: "silla",
id: 9
},
{
alias: "Corrécto",
id: 10
},
{
alias: "Tamaño",
id: 11
},
{
alias: "ñoo",
id: 12
},
{
alias: "silla",
id: 9
},
{
alias: "Corrécto",
id: 10
},
{
alias: "Tamaño",
id: 11
},
{
alias: "ñoo",
id: 12
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="example">
<input type="text" v-model="filterText" />
<ul>
<li v-for="item in filteredItems">{{ item.alias }}</li>
</ul>
</div>

Answer 2

If you mean that you can't get a match when searching strings with characters outside of a-Z range. A basic solution could be to use js charCodeAt function that converts characters to UTF-16 codes. Below is a basic example:
function encodeString(str) {
return str.split('').map(letter => letter.charCodeAt(0)).join('~'); // ~ is to split chars and not to let one mix with other acidentally
}
so your code might actually look something like this:
...
computed: {
filteredItems() {
if (this.items) {
return this.items.filter(item => {
if (!this.search) return false;
return this.isMatching(item.alias, this.search);
});
}
}
},
methods: {
...
encodeString(str) {
return str.split('').map(letter => letter.charCodeAt(0)).join('~');
},
isMatching(haystack, keyword) {
haystack = haystack.toLowerCase().trim();
keyword = keyword.toLowerCase().trim();
return this.encodeString(haystack).match(this.encodeString(keyword));
},
...
}
...