[Vuejs]-Vue.js computed property does not works with big array

by

0👍

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>

0👍

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

...

Leave a comment