Utilizing Vue JS for filtering numerical data

When I search for letters, my code below works well. However, when it comes to numbers like flat_number, it gives me an error saying 

flat.flat_number.toLowerCase is not a function

filteredList() {
  return this.Flats.filter((flat) => {
    return (
      // I tried the commented code but it didn't work
      //  this.Flats.filter(flat_number => String(flat_number).includes(this.search)) ||

      flat.buyer
      .toLowerCase()
      .includes(this.search.toLowerCase()) ||
      flat.flat_number //flat_number not working
      .toLowerCase()
      .includes(this.search.toLowerCase()) ||
      flat.city
      .toLowerCase()
      .includes(this.search.toLowerCase())
    );
  });
},

Can anyone offer some help?

javascriptvue.js

Answer №1

No toLowerCase method is available for the data type Number.

If you need to treat a number as a string, make sure to convert it before comparing it to the search string.

filteredResults() {
    return this.Properties.filter((property) => {
        return (
            property.address.toString()
                .toLowerCase()
                .includes(this.search.toLowerCase()) ||
            property.price.toString()
                .toLowerCase()
                .includes(this.search.toLowerCase()) ||
            property.type.toString()
                .toLowerCase()
                .includes(this.search.toLowerCase())
        );
    });
},

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 building a versatile client-server application with separate codebases for the JavaScript components

We are embarking on the process of rebuilding our CMS and leveraging our expertise with VueJS. Despite our familiarity with VueJS, we won't be able to create a full single-page application due to the presence of server-side rendering files (JSP). The ...

javascripttypescriptvue.jsmodulees6-modules

AngularJS: dependent dropdown menus

Attempting to create a cascade dropdown in Angular, I assumed it would work seamlessly with binding. Here is the code snippet: <select name="client" ng-model="selectedRequest.client" ng-options="c.name for c in clients track by c.id" req ...

javascriptangularjs

Extract the response data following a axios post request (using vue and laravel)

My goal was to devise a unique login system utilizing vue for the frontend, laravel for handling the API, and axios as the intermediary between the two. The challenge I faced was retrieving the data returned from my AuthController. Below are my code snippe ...

phplaravelvue.jsaxios

Troubleshooting overlap problem between Skrollr and SlickNav

I successfully implemented Skrollr to fix images, similar to this example: Additionally, I am utilizing Slicknav for the menu functionality. However, I encountered an issue where the menu opens behind the fixed "parallax" image. Despite trying various ap ...

javascripthtmlcssskrollrslicknav

Empty screen appears when "npm run serve" command is executed following the build process

I am currently utilizing Material-ui. Following the project build with npm run build, I encounter a blank page when running npm run serve. I attempted to set homepage: "./" in the package.json as suggested here, however, it still displays a blank ...

javascriptcssreactjsmaterial-ui

Is it possible to execute this animation with a single click for repetitive playback?

CODEPEN const btt = document.querySelector('.btt'); btt.addEventListener('click', function(){ this.classList.toggle('anime'); }); Is there a way to achieve the desired effect with just one click? ...

javascripthtmljquerycsscss-animations

Can Chrome Support Bookmarklets?

While attempting to craft a bookmarklet in Chrome using the console, I encountered the following error: Refused to load the script 'https://code.jquery.com/jquery-1.6.1.min.js' because it violates the following Content Security Policy directive: ...

javascriptjquerygoogle-chrome

Endless scrolling with Laravel and Vue fails to load data due to request not being sent

Welcome everyone, I am new to using vue.js. I have encountered a simple issue with infinite scroll. Even though I have configured it as shown below, when the page is reloaded, the request to fetch data from the database for page 1 is not sent. I would appr ...

laravelvue.jsvuejs2vue-componentvuex

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

What is the method for transferring form data to a different page?

Currently utilizing AngularJS version 1.5.6 and looking for guidance on properly passing form data using $location.path. Below is my code snippet for Page A: <form> ... <button type="submit" ng-click="submit(formData)"> ...

javascriptangularjs

Fixing blurry text on canvas caused by Arbor.js mouse event issues

Currently, I am utilizing arborjs in my project. The text within the canvas is created using fillText in html5. While everything functions correctly on a Retina display MacBook, the text appears blurry. To address this, I applied the following solution: v ...

javascriptjqueryhtmlcanvas

KineticJS: Applying a filter to an image does not result in the image having a stroke

Working with KineticJS version 5.1.0 I encountered an issue where a KineticJS image that had a stroke lost the stroke after applying a filter to it. I have created a demo showcasing this problem, which can be viewed on JSFiddle. Here is the code snippet: ...

javascripthtmlkineticjs

What other options are available besides componentDidUpdate for retrieving the chosen date from a date picker and including it in an API request?

Currently, I am utilizing react-dates to implement a datepicker feature. Whenever the user modifies the date, it updates a prop that is then sent to the backend as a parameter in a query to fetch specific results for that particular day from the database. ...

javascriptreactjsapireact-dates

Attach onClick event when employing a higher order component

Just getting started with React and I have a question. After following some blog posts, I was able to create a page using higher order components and componentDidMount to fetch data from an API and display it. Everything works smoothly and the code looks ...

javascriptreactjshigher-order-components

Vue.js and TypeScript combination may result in a 'null' value when using file input

I am attempting to detect an event once a file has been uploaded using a file input. Here is the JavaScript code: fileSelected(e: Event) { if ((<HTMLInputElement>e.target).files !== null && (<HTMLInputElement>e.target).files[0] !== null) { ...

javascripttypescriptvue.jsvuejs2

Verify the presence of a specific value within an array of objects in JavaScript that was retrieved from an AJAX response, and then

I am encountering an issue with the code below where I am unable to filter entry.AllLinks. The code snippet is shown here: $.ajax({ url: url, type: "get", headers: {"Accept": "application/json;odata=verbose"}, success: function (data) { ...

javascriptjqueryarraysajax

Triggering an Angular AJAX call by selecting a radio button

I am currently working on implementing a CRUD functionality in my app for the admin console. My tech stack includes MongoDB, Spring, Bootstrap, and Angular. The interface consists of a list of radio buttons on the left side containing names of collections ...

javascriptjqueryajaxangularjs

Utilize socket communication with node.js to monitor and identify user

I'm attempting to find a method to unsubscribe from a Redis channel when the user navigates to another page within our website. I have attempted to detect a disconnect socket event when the user clicks on a link, but unfortunately, the event is never ...

javascriptnode.jssocketsredis

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

cssvue.jsvuetify.js

load a file with a client-side variable

Is there a way to load a file inside a container while utilizing an argument to fetch data from the database initially? $('#story').load('test.php'); test.php $st = $db->query("select * from users where id = " . $id); ... proce ...

javascriptphpjquery