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

I am encountering an issue with my Laravel Vue application where it is not able to delete a record. Should I consider binding my button to ensure it redirects to the controller

Hello, I am facing an issue while working on my app that involves a simple CRUD operation. The problem is that the code does not delete a record when I click the delete button. I am new to Laravel and Vue, so I am still getting familiar with how these two ...

phplaravelvue.js

Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution. In TextInput, a similar outcome can be achieved by implementing ...

javascriptcssreactjsmaterial-ui

"Partially loaded" when document is ready

Is there a way for me to trigger a function once the element identified by #container has finished loading in the DOM? Instead of waiting for the entire DOM to load using document.ready(), I'd like to start populating #container right after it's ...

javascriptjquery

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

I have created an Angular controller that takes data and generates an HTML table from it. The generated table is being displayed on the page. Now, I want to apply jQuery data tables using that scope variable. The variable contains the HTML code of the tabl ...

javascriptjqueryhtmlangularjsdatatables

Unable to properly zoom in on an image within an iframe in Internet Explorer and Google Chrome

My image zoom functionality works perfectly on all browsers except for IE and Google Chrome when opened inside an iframe. Strangely, it still functions flawlessly in Firefox. How can I resolve this frustrating issue? The image link was sourced from the i ...

javascriptcssgoogle-chromeinternet-exploreriframe

Harness the power of ng-click in conjunction with data-ng-href for a

I am attempting to create a button that takes the user to the product details while also having the ability to increase a counter using an ng-click function. <div class="row center-block save-button" > <a data-ng-href="/savings/{{saving._id}} ...

javascriptangularjs

When attempting to execute "nodemon," the command was not detected

When trying to use 'nodemon' in the command line, an error occurs stating that it is not recognized as a cmdlet, function, script file, or operable program. The system suggests checking the spelling of the name and verifying that the path is corr ...

javascriptnode.jsjsonnodemon

An issue has occurred: The necessary parameter (Slug) was not included as a string in the getStaticPaths function for the /post/[Slug] route

Hello, I've recently embarked on a tutorial journey to create the ultimate Modern Blog App using React, GraphQL, NextJS, and Tailwind CSS. However, I encountered an error that's giving me some trouble specifically when trying to access a post. He ...

javascriptreactjsgraphqlnext.js

Tips for fetching data from a database using AJAX when the values of two drop-down lists are involved

I have successfully implemented an Example where I retrieve data using a single drop-down list from a database. Now, I want to extend this functionality to work with two drop-down lists, where the values retrieved from the database are dependent on the sel ...

javascriptphpmysqlajaxjquery

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

Is it possible to apply a regular expression to a igTextEditor within an igGrid Updating? I attempted to utilize the validate option, but it was unsuccessful. $("#schedulerTable").igGrid({ columns: $scope.schedulerColumns, widt ...

javascriptinfragisticsignite-uiiggrid

When the Jqueryui dialog is closed, it effectively terminates the current JavaScript thread

Hello there, I'm currently facing an issue with closing my jQuery dialog box. The situation involves a comet connection that sends messages to my browser. My goal is to perform certain actions upon receiving a message, close the dialog, and then conti ...

javascriptjqueryhtmljquery-ui

Preserve the iframe src value in the dropdown menu even after the page is refreshed

I am trying to figure out how to prevent the iframe src from changing when I refresh the page, unless the user manually changes it using the dropdown menu with JavaScript. Can someone help me with this? <div class="row"> <div class="span9"> ...

javascriptjqueryhtmliframe

How come the hidden container does not reappear after I click on it?

I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, cli ...

javascriptjqueryhtmlcss

Is it necessary to incorporate express in a Next.js project?

I'm currently working on a website using Next.js. With Next.js, I have access to features like SSR and dynamic routing. Is it necessary for me to incorporate express into my project? If yes, what are the reasons behind needing to use it? What unique ...

javascriptnode.jsexpressnext.jsserver-side-rendering

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

javascripthtml

Angular HttpClient does not support cross-domain POST requests, unlike jQuery which does

I am transitioning to Angular 13 and I want to switch from using jQuery.ajax to HttpClient. The jquery code below is currently functional: function asyncAjax(url: any){ return new Promise(function(resolve, reject) { $.ajax({ type: ...

javascriptjqueryangularajaxcross-domain

Request to convert jQuery Ajax code into Vanilla JavaScript code

Are there any vanilla JavaScript alternatives available for the code snippet below? function verifyEmail() { var apiUrl = "https://apilayer.net/api/check?access_key=c5118f1f9827f42a5fc4b231932130a8&email=" + document.getElementById('email&apos ...

javascriptjqueryajaxapiemail-validation

Is using the new Date function as a key prop in React a good

In my React code, I have been using new Date().getTime() as key props for some Input components. This may not be the best practice as keys should ideally be stable. However, I am curious to know why this approach is causing issues and why using Math.random ...

javascriptreactjs

Detecting race conditions in React functional components promises

There's an INPUT NUMBER box that triggers a promise. The result of the promise is displayed in a nearby DIV. Users can rapidly click to increase or decrease the number, potentially causing race conditions with promises resolving at different times. T ...

javascriptreactjspromise

Setting up a CentOs Linux environment to host and run a node.js server

Just installed node.js on my new VPS server. I have written a basic script called "server.js" and it is currently running on port 8080. The location of the script is in the "var/www/html/" directory. However, whenever I try to access my domain, it only dis ...

javascriptlinuxnode.jscentos