Vue.js计算属性不适用于大数组 [英] Vue.js computed property does not works with big array

问题描述

我有一个计算属性，它在项内：{} 数组中，该数组内部有26个对象。该属性仅读取前23个对象，其中24个和下一个对象看起来超出了过滤范围。

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.

在得出此结论之前，我认为问题是因为 24 对象具有特殊字符，但我恢复了数组顺序，并且特殊字符已正确过滤。

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

这是我的过滤器作为计算的代码： porperty

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?

推荐答案

如果您的意思是搜索带有<之外的字符的字符串时无法匹配code> aZ 范围。一个基本的解决方案是使用js charCodeAt 函数，将字符转换为UTF-16代码。下面是一个基本示例：

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

...

这篇关于Vue.js计算属性不适用于大数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！