Attempting to create a sorting functionality using Vue and Typescript

I am trying to implement a feature where clicking on the TableHead should toggle between sorting by most stock on top and least stock on top. Currently, I have two buttons for this functionality, but it's not very user-friendly.

My approach involves using both single click and double click events, which work, but are not optimal for ease of use.

TableHead

<th scope="col" class="px-3 py-3.5 text-left text-sm font-medium text-gray-900 cursor-pointer" @click="sortBy='stockUp'" @dblclick="sortBy='stockDown'">
 Stock
</th>

Variable Used for Sorting Preference:

const sortBy = ref('priceDown')

Sorting Function Logic:

watchEffect(() => {
  // Sorting logic based on the chosen preference (eta, stock, or price)
})

Is there a more user-friendly way to achieve this functionality?

typescriptvue.js

Answer №1

I've discovered that this method works effectively without the need to create an additional variable.

<th scope="col" class="px-3 py-3.5 text-left text-sm font-medium text-gray-900 cursor-pointer" @click="sortBy = sortBy === 'stockUp' ? 'stockDown' : 'stockUp'">
     Stock
</th>

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

What is the best way to manage a promise in Jest?

I am encountering an issue at this particular section of my code. The error message reads: Received promise resolved instead of rejected. I'm uncertain about how to address this problem, could someone provide assistance? it("should not create a m ...

javascriptnode.jstypescriptpromisejestjs

Can a composite type of numbers be created without individually mentioning each one?

Is there a way to generate a union type of numbers that increase by a specific scale without explicitly listing every number in the union? Suppose I have type ScaleByEight = 8 | 16 | 24 | 32 ... 400; Would it be possible to create a utility function where ...

typescript

Error in custom TypeScript: Incorrect error instance detected within the component

I encountered a unique issue with my custom Error export class CustomError extends Error{ constructor(message: string) { super(message); Object.setPrototypeOf(this, CustomError.prototype); this.name = "CustomError"; } Furthermore ...

reactjstypescripterror-handlingnext.js

When validating storage content, session value appears as null

I have been working on developing an Ionic app that requires creating a session for user login. The goal is to store the user's name upon logging in, so it can be checked later if the user is still logged in. I have created a model class and a user cl ...

angulartypescriptsessionionic-framework

Tips for utilizing a formatter with a Doughnut chart in Angular using Chart.js

When using Chart.js with AngularJS, I tried to display numbers or percentages in a doughnut chart using a formatter. However, it did not work as expected. Here is how I implemented it in my HTML: <canvas baseChart class="chart" [data]="do ...

angulartypescriptchart.js

Setting up ESLint for TypeScript with JSX configuration

I am encountering problems with TypeScript configuration. Below is the code snippet from my tsconfig.json: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLib ...

javascriptreactjstypescripteslint

How to implement SVG in React with the image source as a parameter?

I've been working on a React component in NextJS that displays an image inside a hexagon. The issue I'm facing is that when I try to use multiple instances of this component with different images in the HexagonWall, all hexagons end up displaying ...

reactjstypescriptsvgnext.jsjsx

The v-bind value remains static even as the data in Vue.js updates

I created a function called changeActive that is supposed to update the value of an active boolean. Interestingly, after checking the console log, I observed that the active value changes but for some reason, the updated value is not being passed in the ...

javascriptvue.jsvuejs2vue-componentvue-props

How does TypeScript interpret the data type 'a' | 'b' as a string?

As a beginner in TypeScript, React, and English, I apologize for any confusion. I have written a function like this: interface ObjectAttrUniqueState { editVisible: boolean; currentId: number; selectedUnique: number[]; name: string; desc: string; ...

reactjsstringtypescript

Informing a screen reader in Vue.js through the use of aria-live features

My goal is to make a vue component that dynamically announces information to a screen reader when certain events occur on my website. I have managed to achieve this functionality by having a button populate a span with text containing the attributes aria- ...

javascriptvue.jsaccessibilitywai-arianvda

Vue: Error - Unable to execute _vm.myFunction as it is not a function

I'm currently working on adding a basic button to a .vue file that will log a message to the console. Here's the code I have so far: <template> <div> <button v-on:click="sayHello()">Click me</button> < ...

vue.jsbuttoneventsevent-handling

Challenges encountered when testing middleware in a TypeScript Node.js Express project

I have been exploring the repository at https://github.com/goldbergyoni/nodebestpractices to enhance my understanding of nodejs best practices. Below is a middleware I developed: import { NextFunction, Request, Response } from "express"; import ...

node.jstypescriptjestjs

How to retrieve the default type returned by a function using a custom TypeMap

I have a function that returns a promise with a type provided by generics. const api = <Model>(url: string) => Promise<Model> Currently, I always need to set the type of the returned data. const data = await api<{id: string, name: string ...

typescript

What is the best way to reduce the size of TypeScript source code in an Electron application with the help of Electron Forge and Electron Packager

resolved: I was able to solve this issue using electron-builder, which utilizes webpack in the background to handle all problems efficiently. Initially, I faced this challenge while using electron-forge and electron-packager. Despite researching extensivel ...

typescriptelectronelectron-packagerelectron-forge

How to implement the ECharts animated bar chart in Angular version 16?

The animated bar chart in ECharts functions perfectly on Stackblitz. You can check it out here in the Stackblitz Angular 16 demo. However, attempting to run the same demo in a local Angular 16 project led to the following errors. Error: src/app/animated- ...

javascriptangulartypescriptechartsngx-echarts

What is the process for importing an external template into a Vue.js application?

I am new to vue js and I'm not sure if my question is correct. I would like to create the following structure for my Laravel 5.3 - Vue Js App. my-vue.js Vue.component('my-component', { template: 'template from Catgory.Vue ...

vue.jsvue-component

Tips for showing a DialogBox when a blur event occurs and avoiding the re-firing of onBlur when using the DialogBox

Using React and Material UI: In the code snippet provided below, there is a table with TextFields in one of its columns. When a TextField triggers an onBlur/focusOut event, it calls the validateItem() method that sends a server request to validate the ite ...

javascriptreactjstypescriptmaterial-ui

Expand the size of the imported gltf model within Three.js

After successfully loading a 3d model with a gltf extension using the GLTFLoader in Three.js, I encountered a new challenge. I needed to adjust the dimensions of the model dynamically when the window is resized, based on the values of window.innerWidth and ...

typescriptthree.js3dgltf

Vue3 with Typescript may either display an error message or remain empty when handling props

I've been attempting to utilize the default Quasar card component in order to display data received from props. Unfortunately, I haven't had any success as my component remains empty and I keep encountering various errors with each attempt. Rece ...

typescriptvuejs3vue-componentquasar-frameworkquasar

Deleting the access token stored in the cookie prior to making an axios request

I've been facing a challenge in a Vue project where the request headers have become too large for our servers to handle, resulting in 413 error codes. Using JWT bearer tokens, I can see that the token is included in the request as the Authentication ...

typescriptvue.jscookiesaxios