Arranging in descending order after computing percentage within a v-for loop

Question

Arranging in descending order after computing percentage within a v-for loop

Using Vue.js to calculate percentages, consider the following code snippet:

  <tr>
    <span v-for="(item, index) in data.values" :key="index" >
      {{ item.name }} {{ getPercentage(item.nr) }}
    </span>
  </tr>

Here's the method to calculate percentage:

methods: {
  getPercentage (number) {
    return number / this.nrUsers * 100; // Ignore the logic for now
  }
}

The calculation of percentage values is correct, but the issue arises when displaying them. Sorting in descending order is desired, and since the calculation happens here, backend sorting seems challenging. Any suggestions on how to achieve descending sorting in Vue.js?

javascript vue.js sorting vuejs3 v-for

Answer 1

Answer №1

Consider utilizing a computed property in place of a method:

const app = Vue.createApp({
  data() {
    return {
      items: [{id: 1, nr: 5, name: 'aaa'}, {id: 5, nr: 15, name: 'bbb'}, {id: 2, nr: 7, name: 'ccc'}, {id: 3, nr: 24, name: 'ddd'}, {id: 4, nr: 25, name: 'eee'}],
    };
  },
  computed: {
    sortedItems() {
      return this.items.map(item => {
        let pct = item.nr / 100 * this.items.length;
        return { ...item, pct }
      }).sort((a, b) => b.nr - a.nr)
        
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <li v-for="(item, index) in sortedItems" :key="index" >
      {{ item.name }} {{ item.pct }}
    </li>
</div>

Answer 2

Consider utilizing a computed property in place of a method:

const app = Vue.createApp({
  data() {
    return {
      items: [{id: 1, nr: 5, name: 'aaa'}, {id: 5, nr: 15, name: 'bbb'}, {id: 2, nr: 7, name: 'ccc'}, {id: 3, nr: 24, name: 'ddd'}, {id: 4, nr: 25, name: 'eee'}],
    };
  },
  computed: {
    sortedItems() {
      return this.items.map(item => {
        let pct = item.nr / 100 * this.items.length;
        return { ...item, pct }
      }).sort((a, b) => b.nr - a.nr)
        
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <li v-for="(item, index) in sortedItems" :key="index" >
      {{ item.name }} {{ item.pct }}
    </li>
</div>

Answer 3

Answer №2

Sorting the items when rendering is not possible. You must first sort your data in descending order before rendering.

If you follow the steps mentioned in your comment, you will be able to sort the items efficiently.

Retrieve the data from the API.
Iterate over the data items and calculate their percentage.
Arrange the data in descending order based on the percentage value.
Finally, display this sorted data in the template.

Hopefully, these instructions guide you in the right direction.

Answer 4

Sorting the items when rendering is not possible. You must first sort your data in descending order before rendering.

If you follow the steps mentioned in your comment, you will be able to sort the items efficiently.

Retrieve the data from the API.
Iterate over the data items and calculate their percentage.
Arrange the data in descending order based on the percentage value.
Finally, display this sorted data in the template.

Hopefully, these instructions guide you in the right direction.

Arranging in descending order after computing percentage within a v-for loop

Answer №1

Answer №2

Similar questions

Each loop in the forEach function triggers the mouseup event

Ways to retrieve parameters in the following function using Express

How can I toggle specific v-if divs within a v-for loop in Vue.js?

Retrieving a single object from an array in node.js utilizing elemMatch

Encountering an error while attempting to map a collection in React JS - the value is

Loading V-Select with Data from JSON Using Vue.js

Experiencing excessively rapid zooming in JavaFX Leaflet on WebView

Guide to adding the initial element in an array using Immutability Helpers

What is the best way to organize, truncate, and transform elements in an array?

Changing text array to field identifiers with JavaScript

Managing the verification of data existence in the ExpressJS service layer or controller

Organizing your web application directories with AngularJS and Node.js

Steps for launching a pop-up window in a response asynchronously

Updating an object within an array of objects can be achieved by utilizing the setState method in React

Access a remote server via SSH and run Node.js commands

When values are deleted from an array object, the entire structure is altered even when browsing through the keys

Is it possible to execute an npm package without using the npm run command?

Is it possible to enlarge a div using "display: table-cell" property when clicked on?

JSON Attribute Name Escaping

The stunning fade effect of Magnific Popup enhances the visual appeal of the inline gallery