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

Rearrange the li elements within multiple ul lists using JavaScript

Is there a way to reorder multiple ul-lists on my website using JavaScript? An example of the lists may be as follows: $(document).ready(function() { var ul = $('ul.filelist'); for (let u = 0; u < ul.length; u++) { const element = ul[ ...

javascripthtmljquery

What occurs when a file being imported is also importing a file that the first file is already importing?

I have three JavaScript files with dependencies: - main.js <- dependencies: module.js, helper.js - module.js <- dependencies: helper.js - helper.js <- no dependencies main.js and module.js both import from helper.js, while main.js imports from ...

javascriptnode.jsperformanceecmascript-6javascript-import

Troubleshooting script not detecting changes in form

I am currently implementing a script to detect any changes in the form fields and notify the user if there are any. However, instead of triggering the alert box as intended, a different JavaScript box is displayed. Despite my efforts, the script is not re ...

javascriptjqueryformsconditional-statements

Ways to maximize your final export value

My data file, named data.ts, contains a large dataset: export data = [ ... // huge data ] The lib.ts file only utilizes a portion of the data: import { data } from './data.ts'; const fitteredData = data.splice(0,2) // only use some of them ...

javascripttypescriptvue.jsvuejs3vite

While the NPM package functions properly when used locally, it does not seem to work when installed from the

I have recently developed a command-line node application and uploaded it to npm. When I execute the package locally using: npm run build which essentially runs rm -rf lib && tsc -b and then npm link npx my-package arguments everything works sm ...

javascriptnode.jsnpmpackage

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

Strange flickering/visualization issue experienced with transparent MeshPhongMaterial in Three.JS

In my scene, I have a Mesh called cylinder: const cylinder = new Mesh( new CylinderGeometry(2, 2, 1, 32), new MeshPhongMaterial({ color: color, shininess: 32, opacity: 0, transparent: true, specular: 0xffff82, }), ); I made the ...

javascriptthree.js

Switch between light and dark modes with the MUI theme toggle in the header (AppBar)

I'm currently working on implementing a feature that allows users to switch between dark and light themes in my web app. The challenge I am facing is how to ensure that this theme change functionality is available throughout the entire app, not just i ...

javascriptreactjsmaterial-uifrontendthemes

Generate a unique splatter design using Cascading Style Sheets

Imagine a circle link that transforms into a playful animation with a pink shape when you move your mouse over it: I'm torn between different ideas on how to achieve this effect. One approach could be to use individual elements for each drop, utilizi ...

javascriptjqueryhtmlcss

Modify the form's action attribute when submitted

I am trying to create a form with multiple buttons that will change the action and target properties when a specific button is clicked. Below is my code snippet: <div id="root"> <form :action="form.action" ref="form" :target="form.target"&g ...

javascriptvue.js

Dispatching actions in `componentDidMount` is restricted in Redux

Update at the bottom of post I've created a React container component called AppContainer, which checks if the user is authenticated. If the user is authenticated, it renders the app's routes, header, and content. If not, it displays a Login com ...

javascriptreactjsreduxreact-redux

Conceal the element if the offspring is devoid of content

I want to implement a feature where a div is hidden when its child element is empty. To achieve this, I aim to assign the class .no-content to the div if it contains no elements. Below is my existing code with spaces: <div class="ee-posts-list&quo ...

javascripthtmldisplay

Encountering an issue with Nuxt SSR routing - [vue-router] Multiple routes defined with the same

I've been struggling to resolve the warnings popping up on the console: https://i.sstatic.net/lO0tt.png Here is my routes/index.js file: module.exports = [ { name:'shop-page', path: '/sklepy/:id', compo ...

vue.jsroutesnuxt.jsvue-routerserver-side-rendering

Guide on Linking a Variable to $scope in Angular 2

Struggling to find up-to-date Angular 2 syntax is a challenge. So, how can we properly connect variables (whether simple or objects) in Angular now that the concept of controller $scope has evolved? import {Component} from '@angular/core' @Comp ...

javascriptangulartypescript

Is the automatic garbage collection of components a built-in feature of

Consider this scenario, where I have the following HTML document: <html> <head>... including all the necessary js and css files here...</head> <body> <div class="placeholderForExtPanel"></div> </b ...

javascriptextjsgarbage-collection

Using Node.js and Express to retrieve data from a MySQL database and update a table

My .ejs file contains a form that sends data to a MySQL database and then displays two tables with the retrieved data on the same page. However, I am facing an issue where the tables do not refresh after submitting the form, requiring me to restart the ser ...

javascriptmysqlnode.jsexpress

How can I generate spheres in threejs with varying radii while all passing through the shared point located at coordinates (0,0,200)?

Is there a way to generate spheres in threejs where the radius increases while always passing through a single point at 0,0,200? This would allow the origin of each new sphere to move along the z-axis. Appreciate any help, AriemWebgl ...

javascriptthree.js

In order to ensure proper alignment, adjust the width of the select element to match the width of the

Is there a way for the select element to adjust its width based on the length of the selected option? I want the default option value's width to be shorter, but once another option is selected, I'd like the select element to resize itself so that ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3html-select

Which specific graphing library does GitHub utilize for its Graphs section?

Which graphing library is utilized by GitHub on its Graphs tab? The graphs displayed at https://github.com/USER/REPOSITORY/graphs/commit-activity are visually appealing, detailed, and adaptable. If they are leveraging an open source javascript library fo ...

javascriptgithubgraphing

Data not displaying in Vuetify table

Can someone help me with a table display issue in Vuetify? I've tried various solutions but my data is not showing up on the table, although I can see it using the dev tools. Here's a screenshot of how the data looks in the dev tool I've s ...

javascriptjsonvue.jsvuetify.js