Vue.js search functionality

Question

In my BlogList.vue component I made a search input field:

<input type="text" placeholder="Enter key word  ..." v-model="search">

And a computed property:

computed: {
    getfilteredData() {
     return this.blogs.filter(blog =>
        blog.name.toLowerCase().includes(
          this.search.toLowerCase()
        ) ||
        blog.category.toLowerCase().includes(
          this.search.toLowerCase()
        )
      ) 
    }
  },

The user can search on multiple values, i.e. blog.name and blog.category, which updates the list accordingly.

Can I write the above JavaScript (computed property) in a cleaner way?

Answer 1

It is really hard to say, but at least for me, your code is fine. It seems readable and has no issues. Perhaps if you want to change the style and make it more "canonical", you could write instead:

computed: {
    getfilteredData() {
      return this.blogs.filter(blog =>
        blog.name.toLowerCase().includes(this.search.toLowerCase()) ||
          blog.category.toLowerCase().includes(this.search.toLowerCase())
      )
    }
  },

But for me (and I believe, most readers of this post) your code is just fine.

Note: for "canonical" I mean fewer lines of code and more compactness. Clearly, it should be done rationally, and you should not write a 200 characters line. The point is write less and allow readability.

Edit

As Sᴀᴍ Onᴇᴌᴀ answered, it could be substantially optimized if you do:

    getfilteredData() {
      const lowerCaseSearch = this.search.toLowerCase();
      return this.blogs.filter(blog =>
        blog.name.toLowerCase().includes(lowerCaseSearch) ||
          blog.category.toLowerCase().includes(lowerCaseSearch)
      )
    }

because you are creating the lowercase string of your search field only once and using it twice instead of creating it twice and use it twice.

Answer 2

One improvement would be factoring out the repeated call to this.search.toLowerCase() and storing the result in a block-scoped constant so it:

1. doesn't need to be calculated on every call to .includes() for each iteration of filter()
2. can decrease the length of each line where that value is used

That may be a small optimization but it is in line with the D.R.Y. principle

getfilteredData() {
  const lowerTerm = this.search.toLowerCase()
  return this.blogs.filter(blog =>
    blog.name.toLowerCase().includes(lowerTerm) ||
    blog.category.toLowerCase().includes(lowerTerm)
  ) 
},

Additionally, it could further be simplified by using Object destructuring to eliminate the need for the identifier blog with the callback to the filter method:

getfilteredData() {
  const lowerTerm = this.search.toLowerCase()
  return this.blogs.filter({name, category} =>
   name.toLowerCase().includes(lowerTerm) ||
   category.toLowerCase().includes(lowerTerm)
  ) 
},

Answer 3

Another way is to create an array from name and category and combine some method with include:

const result = blogs.filter(blog =>
    [blog.name, blog.category].some(s => s.toLowerCase().includes(searchRow.toLowerCase()))
);

It would be very convenient to scale your method by adding into array just necessary property. Let me show an example:

let blogs = [
    { name: "name 1", category: "category 1"},
    { name: "name 2", category: "category 2"},
    { name: "name 3", category: "category 3"},
];

let searchRow = "name 1";
let result = blogs.filter(blog =>
    [blog.name, blog.category].some(s => s.toLowerCase().includes(searchRow.toLowerCase()))
);
console.log(result);

Answer 4

It doesn't look like this has been suggested yet but you can use object destructuring so you don't have to repeat blog a couple of times.

computed: {
  getfilteredData() {
    const term = this.search.toLowerCase()
    
    return this.blogs.filter(({ name, category }) => {
      return name.toLowerCase().includes(term) || category.toLowerCase().includes(term)
    })
  }
}

Answer 5

As already mentioned, the code is ok, but if you want to make it cleaner by removing code duplication, you can introduce local variables and helper functions:

getfilteredData() {
  const term = this.search.toLowerCase();
  const isMatched = str => str.toLowerCase().includes(term);
  return this.blogs.filter(blog => isMatched(blog.name) || isMatched(blog.category));
}