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

Removing a targeted element from an array in Angular

After receiving a JSON array object in Angular using TypeScript, I am attempting to remove a specified object from it. However, my attempts at deletion have been unsuccessful. addCategorySub(categorySub: CategorySubModel, index: number) { categorySub.id ...

jsonangulartypescript

Is there a way for me to incorporate view charts into my JavaScript file with Vue.js?

I have a project with index.html, script.js, and style.js. I want to implement vue-echarts for a single page. How can I achieve this? <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail= ...

vue.jsvue-chartjs

Is it possible to compile a TypeScript file with webpack independently of a Vue application?

In my Vue 3 + Typescript app, using `npm run build` compiles the app into the `dist` folder for deployment. I have a web worker typescript file that I want to compile separately so it ends up in the root of the `dist` folder as `worker.js`. Here's wha ...

javascripttypescriptvue.jswebpackweb-worker

``The Vue.js routing system is determined by the incoming data received

Working with VueRouter to navigate to a component based on payload. { path: '/foobar', name: 'foobar', component: foobar, } { path: '/foobar', name: 'foobarSuccess', component: foobarSuccess, query: { ...

javascriptvue.jsvue-router

Transfer only designated attributes to object (TS/JS)

Is it feasible to create a custom copy function similar to Object.assign(...) that will only copy specific properties to the target? The code snippet I have is as follows: class A { foo?: string; constructor(p: any) { Object.assign(this, p ...

typescript

Guide on how to showcase the search item in the ui-select menu using Vue framework

Looking for a way to have your search item displayed in the ui-select menu in vue? Imagine if, while typing or on an on-blur event, the item entered by the user would automatically show up in the select menu: As seen in the image above, the word "testings ...

vue.jsui-select

Ways to access the props value within the lifecycle hooks of Vue JS

Is there a way to retrieve the value of props using lifecycle hooks such as mounted or updated, and then store that value in my v-model with additional text? I've been struggling to achieve this. I attempted using :value on the input element with bot ...

javascriptlaravelvue.js

Angular is throwing a RangeError due to exceeding the maximum call stack size

Encountering a stackOverflow error in my Angular app. (see updates at the end) The main issue lies within my component structure, which consists of two components: the equipment component with equipment information and the socket component displaying conn ...

javascriptangulartypescript

Redis: Unable to establish a connection as net.connect is not recognized as a

I'm struggling to integrate Redis with nodejs Encountering issues during execution Despite using the same code, I am facing this error: Here's my code snippet: import { createClient } from 'redis' export const client = createClient({ ...

javascriptnode.jsvue.jsredisnode-redis

The where clause in the Typeorm query builder instance is not functioning properly after its common usage

When fetching data for my relations, I opted to use QueryBuilder. In order to validate certain get request parameters before the index, I established a common QueryBuilder instance as shown below. // Common Get Query const result = await this.reserva ...

javascripttypescriptpostgresqltypeormquery-builder

The onMounted function is invoked in the absence of any existing component instance that can be linked with

React/Angular component <template> <h1>ANOTHER-USER-PAGE</h1> <button @click="changeRoute(`/other/1`)">OTHER 1</button> <button @click="changeRoute(`/other/2`)">OTHER 2</button> ...

vue.jsvuejs3

Two unnamed objects cannot be combined using the AsyncPipe

Currently, I am looking to implement an autocomplete feature using Angular Material in Angular 8. Below is a snippet of the code used in the TypeScript file: @Input() admins: User[]; userGroupOptions: Observable<User[]>; filterFormFG: FormGrou ...

javascriptangulartypescriptasynchronousangular-material

Creating input fields in Vue 3: Best practices

I am looking to create an input field that automatically removes entered characters if they do not match a specific pattern. Here is the template: <input type="text" :value="val" @input="input" /> And here is the ...

javascriptvue.jsvuejs3

The Vuetify accordion template is not appearing due to a v-for loop issue in Nuxt.js

My goal is to set up an FAQ page using Nuxt.js. The template I obtained from Vuetify doesn't display correctly on my localhost. Instead, I'm encountering errors. If I replace 'v-for "(item,i) in 5" : key="i"' as per the template source ...

javascriptvue.jsnuxt.js

In order to conceal the div tag once the animation concludes, I seek to implement React

I'm currently using the framer-motion library to add animation effects to my web page. I have a specific requirement where I want to hide a div tag used for animations once the animation is complete. Currently, after the animation finishes, the div t ...

reactjstypescriptframer-motion

Utilize icons with Vue Native or React Native by integrating them into your projects using the createMaterialBottomTabNavigator function

I've been struggling to display the icons for Vue Native on the bottom tab navigator. As a beginner in coding, I find it quite challenging to grasp the syntax of both Vue native and React native. Despite scouring the internet for information, I could ...

react-nativevue.js

Tips for resolving aliases in tsconfig.app.json when dealing with multiple source directories in WebStorm

When it comes to generating source files, I do things a bit differently and create some of them outside of the usual src directory. Here's how my structure looks: - project - generated - $ui-services some-other.service.ts - src - ...

angulartypescriptangular-cliwebstormtsconfig

Ways to manage an rxjs observable reaction that may potentially have no data?

Currently, I am working with Angular2 and Ionic2 using typescript and have a requirement to manage responses from the backend service. The response may either be empty with http status 200 or it could be a json object containing an error message property ...

angulartypescriptionic-frameworkrxjs

Nuxt 3 Navigation: dynamic routes showing 404 error

I am currently attempting to create a dynamic link using Nuxt3 ("3.0.0-rc.3") and I am encountering issues with reaching the dynamic slug url. Despite following the instructions on this page, it does not seem to be functioning as expected: https: ...

vue.jsnuxt.jsvuejs3vue-routervue-router4

Having trouble with Typescript in React and Firestore? Wondering why you are receiving the error message "Variable 'l' implicitly has type 'any[]' in some locations where its type cannot be determined.ts"?

For my To Do List project, I am utilizing Next.js/React with Firebase as the backend. The task items consist of name, time required for task completion, and due date fields. My goal is to retrieve the items from the Firebase collection and set them in setD ...

reactjstypescriptgoogle-cloud-firestorenext.js