Sorting in Vuejs fails to function properly when a filter is applied

Having recently delved into Laravel and Vue, I am eager to develop a site for our Intranet. Pulling data from the Laravel database has been successful, displaying the data works well, and the search functionality is also up and running smoothly. However, I encountered an issue with sorting the table data when a search value is entered. Despite changes in the sort direction, column, and icon being reflected in the dev tools, the search results remain unsorted.

Here is how my index.vue script setup looks:

 
// Script setup details go here...

The component responsible for loading the data into the table is as follows:

<div class="overflow-x-auto grow pl-6 pr-6">
    <DataTable 
        // DataTable attributes listed here...
     />
</div>

Despite utilizing Vue dev tools and console logging in the handleSort function to pinpoint any errors, everything seems to be functioning properly except for the fact that filteredItems are not returned when the searchFilter is populated.

javascriptvue.jsvuejs3

Answer №1

Success! I managed to make it work by integrating the sorting logic into the filteredItems array. Now everything is functioning smoothly.

const filteredItems = computed(() => {

let tempItems = props.locations

if(searchFilter.value != '') {
    tempItems = tempItems.filter(location => {
        return searchFilter.value
            .split(', ')
            .every(v => 
                location.bezeichnung.toLowerCase().includes(v.toLowerCase()) ||
                location.strasse.toLowerCase().includes(v.toLowerCase()) ||
                location.ort.toLowerCase().includes(v.toLowerCase()) ||
                location.hausnummer.toString().includes(v) ||
                location.plz.toString().includes(v)
            )
    })
}

if(sortDirection.value == false) {
    console.log(sortColumn.value)
    arrowIconName.value = 'fa-solid fa-arrow-up'
    tempItems = tempItems.sort((a, b) => (a[sortColumn.value] > b[sortColumn.value] ? 1: -1))
} else {
    arrowIconName.value = 'fa-solid fa-arrow-down'
    tempItems = tempItems.sort((a, b) => (a[sortColumn.value] < b[sortColumn.value] ? 1: -1))
}

return tempItems

})

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

Modify information on the user interface without the need to refresh the page

Is there a way to update data on the UI without having to refresh the screen in a web application built with Node.js? I'm looking to make only specific changes on the screen. Additionally, how can I ensure that the data displayed on the screen is upda ...

javascripthtmlnode.js

Setting up NextJS on Vercel for website deployment can encounter a common error known as ENOENT Error, which is caused by the absence of a specific file or

Everything works perfectly on my local machine: import fs from 'fs' import path from 'path' export default function createNewDirectory (tokenSignature: string) { const directoryPath = path.join(process.cwd(), 'notes', to ...

javascriptnext.jsdeploymentvercel

Navigating with buttons in the Material UI Drawer

I have implemented a Material UI drawer with some modifications. The original code used buttons, but now I want to navigate to a new page when a button is clicked. For example, clicking on the 'INBOX' button should take me to a page '/new&ap ...

javascriptreactjsreact-routermaterial-ui

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

javascripthtmlcsssafari

Preventing page refresh when typing in a form input: Tips and tricks

I'm currently puzzled by a small issue. In my web application, I have a chat box that consists of an input[type='text'] field and a button. My goal is to send the message to the server and clear the input field whenever the user clicks the b ...

javascripthtmlangularjstwitter-bootstrap

Learn the steps for converting data from xlsx or csv files into JSON format

I am currently working on developing an application that allows users to upload xlsx or csv files from the frontend and submit them to a backend built with nodejs and express for processing. However, when I receive the data in the backend, it appears in th ...

javascriptnode.jsexpressbuffersheetjs

Transforming an array of strings into a Name/Value object using JavaScript

Recently, I encountered a Web Service that sends an array of strings to the client. My goal is to transform this array into an object where each string has a name for future reference. Let's start with: var result = ["test", "hello", "goodbye"]; An ...

javascriptjquery

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...

javascriptjqueryhtmlcssajax

Activate jQuery function upon clicking a bootstrap tab

When I click on a Bootstrap tab, I want to trigger an AJAX function. Here is the HTML code: <li><a href="#upotrebljeni" data-toggle="tab">Upotrebljeni resursi</a></li> The jQuery AJAX function looks like this: $('a #upotreb ...

javascriptphpjqueryajaxpdo

Automatically Modify Uploaded Files on the Server

There is one thing that has caught my attention. I am interested in working with scripts that can automatically edit a file once it's been uploaded. For example, imagine having a form where someone uploads an HTML file. The script would then edit spe ...

phpjavascripthtml

Transcluding content inside a table cell with Angular

Recently, I came across a peculiar issue with an attribute directive in Angular. This directive simply adds a class name to the element where it is applied, specifically to a table cell <td>. Oddly enough, when I set transclude: true in the directive ...

javascriptangularjsangularjs-ng-transclude

Transform the arrow function into a standard JavaScript function

Here is the React return code snippet I'm working with: return ( <div className='App'> <form onSubmit={this.submit.bind(this)}> <input value={this.state.input} onChange={(e) ...

javascriptreactjsarrow-functions

Converting an array of objects into an array of Objects containing both individual objects and arrays

I am dealing with an object const response = { "message": "story records found successfully", "result": [ { "created_AT": "Thu, 13 Jan 2022 17:37:04 GMT", ...

javascriptarrays

How can scripts communicate with one another through passing arguments?

"scripts": { "dev": "npm run development", "development": "run-something", .... When invoking my script, I use the following command: npm run dev This is a convenient shortcut that executes the standard command npm-run-development. Is there ...

javascriptnpm

Vue js: Automatically assign alternate text to images that are not found

Currently, I am in the process of developing a website that features a variety of products, each with its own unique image. For binding the image URL to the source attribute, I use the following code snippet: <img :src="product.ImageUrl"/> In case ...

javascriptvue.jsvuejs2

A guide on integrating MySQL table data into React card elements

After successfully populating a React table within a card (see first code snippet below) with MySQL table data, I am now faced with the challenge of populating a card's information with the same SQL data. The image below displays how cards are curren ...

javascriptreactjsmaterial-ui

Vuejs dropdown selections are not working as expected due to a bug

My dropdown menu is being populated with options based on an API response that looks like the following: {"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{&qu ...

javascripthtmlcssvue.jsvue-directives

Tips for testing VUE 3 Composition API functions effectively!

Is there a way to effectively unit test methods within the VUE 3 Composition API, specifically when the methods are not directly accessible or exportable from the <script setup lang="ts"></script> block? Consider the example of Hello ...

vue.jsunit-testingvue-composition-apivitest

Verify if an express module has a next() function available

Is there a method to check if there is a function after the current middleware? router.get('/', function(req, res, next){ if(next){//always returns true } }); I have a function that retrieves information and depending on the route, thi ...

javascriptnode.jsexpressmiddleware

Lambda function failing to execute Auth0 methods through the Auth0 node-auth0 SDK

I am working with a lambda function that triggers when a message is added to the SQS queue. Within the message, there is a userId that I want to connect to using the Auth0 node SDK. The code snippet for my GetUserDetails function below shows that it logs ...

javascriptnode.jsaws-lambdaauth0