Using VueJS Computed Property along with Lodash Debounce

Question

Using VueJS Computed Property along with Lodash Debounce

I have been encountering a slowdown while filtering through a large array of items based on user input. I decided to implement Lodash debounce to address this issue, but unfortunately, it doesn't seem to be having any effect.

Below is the HTML search input field where users can type to filter through the array:

<input v-model="search" type="text"/>

Here, I am iterating through the filteredIcons computed property to display the items:

<section v-if="icons.length">
  <button v-for="(icon, index) in filteredIcons" :key="index">
    <span v-html="icon.icon"></span>
    <span v-text="icon.name"></span>
  </button>
</section>

And here is the section where the large icons array is filtered through the computed property:

import { debounce } from "lodash";

export default {
  data() {
    return {
      icons: [
               {
                 "author":"svg",
                 "icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M13 16v5a1 1 0 01-1 1H9l-3-6a2 2 0 01-2-2 2 2 0 01-2-2v-2c0-1.1.9-2 2-2 0-1.1.9-2 2-2h7.59l4-4H20a2 2 0 012 2v14a2 2 0 01-2 2h-2.41l-4-4H13zm0-2h1.41l4 4H20V4h-1.59l-4 4H13v6zm-2 0V8H6v2H4v2h2v2h5zm0 2H8.24l2 4H11v-4z\"/></svg>",
                 "name":"icon-announcement.svg"
               },
               {
                 "author":"svg",
                 "icon":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M20 9v10a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 01-2-2V5c0-1.1.9-2 2-2h16a2 2 0 012 2v2a2 2 0 01-2 2zm0-2V5H4v2h16zM6 9v10h12V9H6zm4 2h4a1 1 0 010 2h-4a1 1 0 010-2z\"/></svg>",
                 "name":"icon-archive.svg"
               }
             ],
      search: ""
    };
  },
  computed: {
    filteredIcons: {
      get() {
        return this.icons;
      },
      set: debounce(function() {
        this.icons = this.icons.filter(icon => {
          icon.name.toLowerCase().includes(this.search.toLowerCase());
        });
      }, 500)
    }
  }
}

I'm puzzled by why this implementation isn't working as expected and would greatly appreciate any suggestions on the best approach for efficiently filtering through a large array using debounce. Thank you for your help!

javascript vue.js lodash computed-properties debouncing

Answer 1

Answer №1

It appears that your filter function is not properly returning the result of String#includes. As a result, all items are not matching the filter criteria, leading to an empty array. To fix this, you have two options:

const filteredIcons = this.icons.filter(icon => {
  return icon.name.toLowerCase().includes(this.search.toLowerCase())
})

You could add a return keyword in the code block or simply remove the brackets and semicolon:

const filteredIcons = this.icons.filter(icon => icon.name.toLowerCase().includes(this.search.toLowerCase()))

Furthermore, it is recommended to implement debounce functionality on user input rather than on the computed setter. One way to achieve this is by using a watcher on the input's v-model (i.e.,

search</code) and debouncing the result:</p>
<pre class="lang-js"><code>export default {
  watch: {
    search: {
      handler(search) {
        this.setIconsDebounced(search)
      },
      immediate: true
    }
  },
  methods: {
    setIconsDebounced: _.debounce(function(search) {
      this.filteredIcons = this.icons.filter(/*...*/)
    }, 500)
  }
}

This approach removes the need for the computed prop but requires declaring a variable to store the filtered icons in your data props:

export default {
  data() {
    return {
      filteredIcons: []
    }
  }
}

For a working demonstration, you can check out this demo.

Answer 2

It appears that your filter function is not properly returning the result of String#includes. As a result, all items are not matching the filter criteria, leading to an empty array. To fix this, you have two options:

const filteredIcons = this.icons.filter(icon => {
  return icon.name.toLowerCase().includes(this.search.toLowerCase())
})

You could add a return keyword in the code block or simply remove the brackets and semicolon:

const filteredIcons = this.icons.filter(icon => icon.name.toLowerCase().includes(this.search.toLowerCase()))

Furthermore, it is recommended to implement debounce functionality on user input rather than on the computed setter. One way to achieve this is by using a watcher on the input's v-model (i.e.,

search</code) and debouncing the result:</p>
<pre class="lang-js"><code>export default {
  watch: {
    search: {
      handler(search) {
        this.setIconsDebounced(search)
      },
      immediate: true
    }
  },
  methods: {
    setIconsDebounced: _.debounce(function(search) {
      this.filteredIcons = this.icons.filter(/*...*/)
    }, 500)
  }
}

This approach removes the need for the computed prop but requires declaring a variable to store the filtered icons in your data props:

export default {
  data() {
    return {
      filteredIcons: []
    }
  }
}

For a working demonstration, you can check out this demo.

Using VueJS Computed Property along with Lodash Debounce

Answer №1

Similar questions

Utilize AJAX to dynamically insert data into the database

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

Generate available choices for an asp:DropDownList using JavaScript without relying on the client-side ID

Automated logout feature will be enabled if no user interaction is detected, prompting a notification dialog box

Obtain the values from this JSON array

The saving function of the Jquery camera is not working properly and does not store the

Tips on incorporating the wait function within the evaluation_now action in Nightmare?

Executing intricate MongoDB collection queries using Node.js

Incorporating URL addresses and pagination features using React.Js and Material-UI components

What is the method for initiating a radial gradient from the middle of the pie chart?

Can the color scheme be customized for both light and dark themes in Ant Design version 5?

Hover and hover-off functions in navigation menu

Begin the React counter with a starting value of two

Incorporating a feature to leave comments in JSON data through AngularJS

What is the best way to choose an item from a list nested inside a div?

The deployed vue.js application encounters a 404 error when the page is refreshed within the vue-router

Problem with React Router: Uncaught Error - Invariant Violation: The element type is not valid, a string is expected for built-in components

How can I integrate the native calendar of an Android device in Phonegap?

What could be causing my select value to stay unchanged? Issue with the "selected" attribute or property

I am interested in creating JSON data