Creating three search fields in Vue.js with computed properties is a powerful and efficient way to filter

I am struggling to implement a search feature with three fields - one input and two selectors. I was able to get it to work with two fields, but adding the third is causing issues. I could really use some guidance on this.

 computed: {
    filterMembers: function () {
      let filtered = this.trabalinhos;

      if (this.searchText) {
        filtered = this.trabalinhos.filter(
          (m) => m.title.toLowerCase().indexOf(this.searchText) > -1
        );
      }

      if (this.searchTrabalho) {
        filtered = filtered.filter(
          (m) =>
            m.title.toLowerCase().indexOf(this.searchTrabalho) ==
            this.searchTrabalho.toLowerCase() > -1
        );
      }

      if (this.select) {
        filtered = filtered.filter(
          (m) =>
            m.title.toLowerCase().indexOf(this.select) ==
            this.select.toLowerCase() > -1
        );
      }

      return filtered;
    },
  },

Answer №1

It is recommended to utilize the includes method.

computed: {
  filterMembers() {
    return this.trabalinhos
      .filter(member => member.title.toLowerCase().includes(this.searchText))
      .filter(member => member.title.toLowerCase().includes(this.searchTrabalho))
      .filter(member => member.title.toLowerCase().includes(this.select))
  }
}

OR

computed: {
  filterMembers() {
    return this.trabalinhos
      .filter(member => 
        member.title.toLowerCase().includes(this.searchText) &&
        member.title.toLowerCase().includes(this.searchTrabalho) &&
        member.title.toLowerCase().includes(this.select)
    )
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on generating a 2D array from linear information

Currently facing an issue while attempting to create a 5x5 grid of values. This is the structure of my code at the moment: public class a { public static void main(String[] args) { int[][] arr ={ { 9, 15, 4, 10, 7, 26, 30, 18, 24, 21, 32, 39, 42, 37, ...

Mall magnitude miscalculation

I am currently experiencing an issue with Galleria and the Flickr plugin. Some images are displaying correctly, while others appear scaled and parts of them are cut off. How can I fix this problem? Below is the HTML code for the Galleria gallery on my web ...

Using jQuery to restrict the number of checked checkboxes based on a selected value - Here's how!

How can I restrict the number of checkboxes that can be checked based on the selected option from a dropdown menu? For example, selecting 'option1' should allow only 1 checkbox to be checked, 'option2' should allow 2 checkboxes, and so ...

Implementing asynchronous validation in Angular 2

Recently started working with Angular 2 and encountered an issue while trying to validate an email address from the server This is the form structure I have implemented: this.userform = this._formbuilder.group({ email: ['', [Validators.requir ...

Bootstrap Tags Input is unable to function properly with data stored locally

I am currently working on developing a Project Manager tool that allows for the addition of multiple individuals to a single project. To accomplish this, I decided to incorporate the use of Bootstrap Tags Input by following the examples provided for Typeah ...

"OBJLoader Three.js r74, bringing vibrantly colored elements to your 3

It's a straightforward process, I import my OBJ model that was exported using 3DS Max. I have the intention of coloring a specific section of the Object. During the animation loop, I implement the following: scene.traverse( function( object ) { ...

Unexpected behavior encountered in Rails app with unobtrusive JavaScript

I'm facing an issue with my link_to setup. Here's what I have: <%= link_to "Load More", comments_feed_path(@post.id), :id => 'my-link', :remote => true %> In my application.js file, I have the following code: $( document ...

Setting up and launching a fresh JS project

Hey there, I recently began a course on Udemy to dive into the world of JavaScript and React. However, after installing Node.js and NPM, I encountered an issue when trying to use npm start. The error message reads "ENOENT: no such file or directory." I&apo ...

Ways to output a string array from a JSON object containing additional attributes

On the client side, I have received a JSON object from a REST service. This object contains multiple attributes, one of which is a String array. I need guidance on how to display this array using embedded AngularJS code in HTML. Here is my JSON object: [ ...

Why is there a node_modules folder present in the npm package I authored when using it as a dependency in another module?

After successfully launching my first npm package, I noticed something strange when installing it as a dependency in my project. Upon exploring the project folder in node_modules, I discovered an unexpected node_modules folder containing just one package ...

Navigating to a different URL in a remoteMethod with Loopback and Express

Can anyone provide any guidance on how to redirect to a URL within a model function or remoteMethod? I've been struggling to find documentation on this. Here is the code snippet for reference: Model Function (Exposes /catch endpoint) Form.catch = func ...

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...

Wait until all information has been entered into the database before replying to the request

I have been exploring a way to insert multiple data in one call and only trigger a response after all the data has been inserted. Here is my current implementation: create: function(req, res) { var response = {}; var num = req.body.num; var re ...

Tips for adjusting the placement of an object within a table

Below is an example of a basic table: table, th, td { border: 1px black solid; border-collapse: collapse; } <table> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> <tr&g ...

Using three.js library from npm to import the THREE.Lut() functionality

After installing three packages from npm, I attempted to invoke: lut = new THREE.Lut( colorMap, numberOfColors ); However, I encountered the error message: "export 'Lut' (imported as 'THREE') was not found in 'three'. Altho ...

What is the best way to save characters from different languages into variables?

I created an application that reads words from a TXT file and stores them in a database. The issue arises when I encounter words from other languages that contain non-English characters, resulting in the following problem: Is it possible to store these ch ...

ASP.NET Core does not support jQuery.validate functionality

After successfully creating a functional jQuery.validation form using HTML, CSS, and JS with dependencies like jQuery and Validation, I encountered an issue when implementing the same code in a clean ASP.NET Core web project. It seems that my custom valida ...

Vuejs error: String length is not valid

Just starting out with VueJS, everything was fine when I compiled this code: <template> <div id="users-table"> <ServerTable url="users" :columns="columns" :options="options"></ServerTable> </div> </template> Ho ...

What is the best way to explore JavaScript text using Firebug?

The search function (magnifying glass) located at the top-right hand corner of Firebug does not have the capability to search within JavaScript blocks. For instance, if I have the following code snippet: <script type="text/javascript"> var fooBa ...

AlphaVantage Platform: Element not found

As someone new to API services, I'm currently working on constructing a dashboard that pulls data from the Alphavantage API. My goal is to retrieve data for 3 symbols simultaneously by creating a list and passing the index to my API call. Each symbol ...