What is the functionality of the filterBy method in Vue.js 1.x?

Looking to create a filter for my app similar to the filterBY Vue.js feature on older versions...

Currently working on a Computed Property to generate an array containing objects that match a specified string variable... However, my goal is to create a reusable solution without specifying the search attributes each time...

Appreciate your support, everyone!

Answer №1

A kind soul in the Facebook group Vue.js Brazil named Israel Sant'Anna provided the perfect solution to my issue. Here is the workaround he shared:

var filterList = function(arr, filterTerm){
if (filterTerm === '') return arr
return deepFilter(arr, filterTerm)

}

var deepFilter = function(arr, filterTerm){ return arr.filter(item => {

if (typeof item === 'object'){
        return deepFilter(Object.values(item), filterTerm).length > 0;
}

if(item.toString().indexOf(filterTerm)>=0){
    return true;
}

}) }

https://jsfiddle.net/igortrindade/3jr27cwm/6/

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

Error: React.js - operationStore.getItems function is not defined

I've encountered an issue while running my Web App with the command: node --harmony gulpfile.babel The error message states: Uncaught TypeError: operationStore.getItems is not a function I'm struggling to identify the root cause of this problem ...

Perform a function within another function in Vue

I am dealing with two nested functions in Vue. The parent function needs to retrieve the value of an attribute, while the child function is responsible for using this attribute value to make an API call. How can I ensure that both parts are executed simult ...

What role does createLocalVue play in the testing of Vue components with Vuex?

Currently, I am delving into the world of testing Vue components by referring to the Vue Testing Cookbook as well as Vue Test Utils documentation. These resources emphasize the use of createLocalVue when testing Vuex within components. However, I am puzzle ...

Methods to fill a data table cell

I have recently created a table and I am facing an issue in populating the tds cells using JavaScript. The data for the table is coming from the server. Here's my table: <table id="report" class="infoRecurso" id='testExportId' style="wid ...

How can I edit this code in JSPDF to print two pages instead of just one?

Currently, I have a script that can generate a PDF from one DIV, but now I need to create a two-page PDF from two separate DIVs. How can I modify the existing code to achieve this? The first DIV is identified as #pdf-one and the second DIV is #pdf-two. p ...

Static response is the way to go! Asynchronous responses just don't cut it

Currently in the process of developing an angular directive for displaying real-time charts. Below is the code snippet that encompasses everything, including link: function() { }, within the directive. Here's the code for a static directive that func ...

Exploring the potential of Oracle Openscript in combination with Javascript using AngularJS,

I have encountered an issue while using Openscript on a form page with a clickable "save" button implemented as a div. Manually clicking the button triggers a javascript event that saves any changes made on the page. However, when I run the script, the but ...

Is there a way to execute JavaScript tests by incorporating debugger statements?

There isn't a one-size-fits-all solution to this question, and it hasn't been addressed on Stack Overflow either. My background is in Python, where I can use import pdb; pdb.set_trace() to debug code step by step with a debugger. How can I achiev ...

Display all y-axis values in the tooltip using HighCharts

I utilized a chart example from http://www.highcharts.com/demo/column-stacked When you hover the mouse over a column, it displays the value of the y axis being hovered and the total value. I am interested in having the tooltip show the values of all 3 y ...

Toggle the visibility of a div by clicking on another div in a

I have created a unique design where a div features a background image of a face, along with a paragraph, two buttons, and an input box inside it. While I know this question has been asked before, my scenario is slightly different. I want the div with the ...

Tips for testing nested HTTP calls in unit tests

I am currently in the process of unit testing a function that looks like this: async fetchGreatHouseByName(name: string) { const [house] = await this.httpGetHouseByName(name); const currentLord = house.currentLord ? house.currentLord : '957'; ...

Setting a default value in a multi-select dropdown using react-select

I have taken over management of my first React app, and I am facing a seemingly simple change that needs to be made. The modification involves an email signup page where users can select their interests from a multi-select dropdown menu. My task is to mak ...

No response text returned from the local Ajax request

Currently, I am facing a challenge while attempting to send an ajax call from the client to my server containing data related to an input parameter. The issue is that although I can view the data in my server's console, it does not display in the brow ...

Solving repeated function firing with ng-checked in an AngularJS ng-repeat loop

In the HTML code below, there is an ng-repeat that creates checkboxes: <span ng-repeat="name in $ctrl.widgetSelectorNames" class="widget-selectors"> <label class="checkbox" for="{{name}}"> <input type="checkbox" value="{ ...

Encountering an issue with the for loop in React Native when using FlatList

As a beginner in programming, I am eager to dynamically render a list. The Navbar parent component holds the state with different Food Types categories such as Mexican and Chinese, each with its corresponding menu. My goal is to display each Food Type fol ...

Interfaces and Accessor Methods

Here is my code snippet: interface ICar { brand():string; brand(brand:string):void; } class Car implements ICar { private _brand: string; get brand():string { return this._brand; } set brand(brand:string) { this. ...

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

When adding a new list item dynamically in a modal using jQuery append, the spacing in the first li element seems to have a larger gap between the input fields compared to the rest that are added later. Even after checking the developer tools and confirmin ...

Switch between selecting every group of 3 items and every group of 4 items

Having an array with more than 14 items, I need to group them into 2 different groups in this specific way: The first 3 (#1,2,3) will be in array A, the next 4 (#4,5,6,7) will be in array B, the following 3 (#8,9,10) will be in array A, the subsequent 4 (# ...

How does setting $.support.cors = true; affect the performance of ajax calls on browsers that do not support Cross-Origin Resource Sharing (

Hey everyone, I've encountered a situation where I need to make cross-domain AJAX requests, so I included the line "$.support.cors = true;" before my ajax calls. However, I'm noticing that for non-cross domain calls, my ajax requests don't ...

What is the optimal method for creating and testing AJAX applications on a local server, then effortlessly deploying them online?

Exploring AJAX development is new to me. The challenge I've encountered so far is dealing with the same-origin policy, which requires modifying host information strings like absolute URLs in JavaScript files every time I deploy local files to remote s ...