What steps can I take to improve the efficiency of this filtering process in Vue.js?

I am seeking ways to enhance the method I utilize for determining which values should be displayed in a table. At present, my table displays various values and is accompanied by input fields. The values chosen in these input fields serve as filters for the content within the table.

<!-- Input Fields -->
<v-select placeholder="Index" :options="indexList" v-model="filterTable['indexedValue']" @input="filteringTable"></v-select>
<v-select placeholder="Domain" :options="domainList" index="index" label="txt" v-model="filterTable['domainValue']" @input="filteringTable"></v-select>
<!-- Table -->
<table>
  <tbody>
    <tr v-for="(value, i) in filteringTable()" :key="value.id">
          ...<!-- Values Displayed Here-->
</table>

The selected input field values are linked to the filterTable object.

data () {
  return {
    filterTable: {}
  }
}

The function triggered on input is defined as below:

filterTable () {
      var newLinks = this.links // object containing all information to display in the table

      if (this.filterTable['indexedValue'] != null && this.filterTable['indexedValue'] !== undefined) {
        newLinks = newLinks.filter(l => l.post.indexed === this.filterTable['indexedValue'])
      }
      if (this.filterTable['domainValue']) {
        newLinks = newLinks.filter(l => l.tag.domain === this.filterTable['domainValue'])
      }

      return newLinks
    }

(My code includes 2 additional if statements that check values from other input fields, following the same logic as above) This implementation successfully filters the table. However, with multiple if statements, I am exploring strategies to optimize and improve efficiency.
I welcome any suggestions or guidance!

Answer №1

It would be more efficient to utilize computed instead of methods in this case. Additionally, I have adjusted the function name as using the same names could potentially lead to issues:

computed: {
  filter_table() {
    return this.filterTable["domainValue"]
      ? this.links.filter(l => l.tag.domain === this.filterTable["domainValue"])
      : this.links.filter(
          l => l.post.indexed === this.filterTable["indexedValue"]
        );
  }
};

<tr v-for="(value, i) in filter_table" :key="value.id">

This adjustment should work effectively for your needs.

You can simplify by directly using this.links.filter() without creating a new variable like var newLinks = this.links. The filter method already returns a new array with the filtered values.

Edit:

Upon further clarification, if you require filtering based on both conditions being met:

computed: {
  filter_table() {
    return this.links.filter(
      (l) =>
        l.tag.domain === this.filterTable["domainValue"] &&
        l.post.indexed === this.filterTable["indexedValue"]
    );
};

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

Tips for removing JavaScript functions that were initialized after an ajax request

In my setup, there are two main pages: Page A and Page B. Page A consists of the following components: HTML for Page A JavaScript for Page A JavaScript for Page B Subsequently, I utilize an ajax call to inject Page B's HTML into Page A and trigger ...

Encountering the issue of receiving an undefined class when using the img tag in a

In my React.js project, I encountered an issue where the class for the img tag is appearing as undefined. The problem lies within the Header.jsx component. In this file, I am using the <img> tag but the CSS properties are not being applied to the ima ...

Using AJAX to search through paginated pages is quite simple and effective

Currently, I have developed a JavaScript script that filters names within a list. However, a problem has arisen with pagination - as the list paginates, I am unable to retrieve names without refreshing the page. Is there a way to use AJAX to access and dis ...

Pass the input value through ajax without utilizing the val() function

Here is my scenario: I have multiple input fields: <label class="minilabel">Field1</label><input type="text"> ... <label class="minilabel">FieldN </label><input type="text"> I need to extract the value of each input f ...

Recording web browser network traffic using JavaScript

Is there a method in webdriverio that allows me to capture and validate the response of API calls made by the browser while loading data for my automated tests? https://i.sstatic.net/TMExU.png ...

Attempting to include a select element via transclusion

Looking to develop a custom directive named select that will replace a select element with a customized dropdown interface. For a clear example, check out this jsfiddle where the concept is demonstrated. Let's consider the below select element: < ...

Having trouble compiling for IOS using a bare Expo app? You may encounter an error message that reads "Build input file cannot be found."

Encountering Error When Running react-native run-ios on Bare Expo App I am experiencing an issue while trying to run the 'react-native run-ios' command on my Bare expo app. The error message I am receiving is: "Build input file cannot be found: ...

Divide a JavaScript project into multiple packages using either webpack or npm

I am embarking on the development of an application that needs to be compatible with Windows (PC), Android, and iOS. To achieve this, I plan to use Electron for Windows and React Native for mobile platforms. Both applications will be built using React and ...

What is the best way to retrieve the input value from post.ejs?

app.js var express = require('express'); var bodyParser = require('body-parser'); var app = express(); var passport = require('passport'); var localStrategy = require('passport-local'); var axios = require("axi ...

Tips for implementing code to function across several images in HTML and CSS

Hey there, I'm currently working on a website project for my friend and I sometimes refer to www.w3schools.com for help with coding. I'm having trouble implementing a gallery feature where users can click on images to view them fullscreen. I foun ...

What is the process for producing multiple objects in JSON format and then accessing them from within <g:javascript> in Grails?

My goal is to add two select boxes within the results div using Ajax. I have a function named ajaxFun that retrieves values for the select boxes. However, I am struggling with rendering multiple objects as JSON and then retrieving them in my JavaScript fun ...

Using a structural directive in Angular 2 that accepts a String as an input

I am attempting to develop a custom structural directive using the example provided here When trying to pass a string as an input with a slight modification, I encountered an issue where the input value was returning 'undefined' when calling th ...

Android textView is populated with randomly generated alphanumeric text after parsing file

I have a parse file coming from parse.com as a string message, and I need to display it in a textView. ParseFile file = message.getParseFile(ParseConstants.KEY_FILE); String filePath = file.getDataInBackground().toString(); if (messageTy ...

I am unable to implement code coverage for Cypress in Debian at the moment

Having trouble obtaining code coverage results using Cypress in my Virtual Machine (Debian Bullseye), but no issues when I run the same project on my Windows machine. On Linux, the code coverage shows up as: Click here to view Index.html inside lcov-repor ...

Test your word skills with the Jumbled Words Game. Receive an alert when

After reviewing the code for a jumble word game, I noticed that it checks each alphabet individually and locks it if correct. However, I would like to modify it so that the entire word is only locked if all the letters are correct. Any suggestions on how t ...

Tips on removing authentication token when logging out in react native

Working with the Django Rest Framework and React Native for the front-end, I am currently facing an issue where the authentication token persists even after a user logs out from the front-end. This is evident as the token still shows in the Django admin pa ...

Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

I need to filter or eliminate certain files from a FileList object that I obtained from a directory chooser. <input type="file" accept="image/*" webkitdirectory directory multiple> Within my .ts file: public fileChangeListener($event: any) { let ...

The callback function in jQuery does not function properly in a custom class or object

Hello, I am new to the world of programming so bear with me if this question seems basic. I am currently working on creating a simple wave effect to give the illusion of moving water. Initially, I achieved this using a straightforward jQuery function which ...

Best practice for resetting jquery datatables for proper functioning

A user on Stack Overflow was seeking a solution for working with DataTables.js and a variable number of columns. The provided solution can be found here: http://jsfiddle.net/gss4a17t/. It's worth noting that this solution relies on a deprecated funct ...

Eliminating a pattern with underscore.js or jquery - the complete guide

I am looking to remove the ellipses (...) from a value such as ...India. How can I achieve this using underscore.js, jQuery, or JavaScript? Any tips on how to accomplish this would be greatly appreciated! ...