Tips on organizing columns in Vue when sorting is needed for computed values

Question

Tips on organizing columns in Vue when sorting is needed for computed values

I have come across various resources for sorting data that is contained within an array, but I am unable to locate any information on how to sort dynamically generated data.

<table>
    <thead>
      <tr>
        <th>Program</th>
        <th>Rewards</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="program in programs" :key="program.id">
        <td>{{ program.program_name }}</td>
        <td>{{ pointValue(program) | percent }}</td>
      </tr>
    </tbody>
  </table>

The pointValue() function calculates and returns a value displayed as a percentage in the Rewards column. I am interested in making the table sortable by Programs and by Rewards. (Program is simply a string).

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Generate an array of computed values for programs by utilizing the map and sort methods, then iterate through it instead

computed: {
  computedPrograms() {
    return this.programs
      .map(program => {
        return {
           ...program,
           value: this.pointValue(program)
        }
      })
      .sort((a, b) => a.value - b.value)
  }
}

<tr v-for="program in computedPrograms" :key="program.id">
  <td>{{ program.program_name }}</td>
  <td>{{ program.value | percent }}</td>
</tr>

Answer 2

Generate an array of computed values for programs by utilizing the map and sort methods, then iterate through it instead

computed: {
  computedPrograms() {
    return this.programs
      .map(program => {
        return {
           ...program,
           value: this.pointValue(program)
        }
      })
      .sort((a, b) => a.value - b.value)
  }
}

<tr v-for="program in computedPrograms" :key="program.id">
  <td>{{ program.program_name }}</td>
  <td>{{ program.value | percent }}</td>
</tr>

Tips on organizing columns in Vue when sorting is needed for computed values

Answer №1

Similar questions

Encountered an error while attempting to load resource: the server returned a 404 (Not Found) status code when trying to load an image in an

What is the speed of retrieving new data once it has been inserted into a firebase real-time database?

What is the best way to transform the request query id = ' [12eetftt76237,jhgasduyas7657] ' into an array of elements or strings like [12eetftt76237,jhgasduyas7657]?

The instance is referencing "underscore" during render, but it is not defined as a property or method

Encountered difficulty in setting cookie with ngx-cookie-service

Caution when using a React form: Value of `true` has been detected for a non-boolean attribute `validate`

The configuration error occurred for the `get` action due to an unexpected response. Instead of an object, an array was received

Revise the reply within ExpressJS

Retrieve all data from the 'belongsToMany' table where a particular record is included in the list

Update the class of the appropriate navigation tab when the corresponding div is scrolled into view

Is it possible to utilize router.push within Redux thunk? Is this considered a beneficial approach?

Obtaining a response in string format using the $.ajax function

Welcome to the latest update of React Router version 6.4.3 featuring the new

The issue with Mongoose not properly dropping the database and closing the connection is causing unexpected behavior in Mocha tests

Creating custom fields with user input in WordPress widgets

What is the method for ending the mouseleave effect?

Tips for updating the background color of a highlighted row within a Vuetify Datatable

Chrome not responding to ajax requests

The measurement of a HTML window's entire content height (not just the visible viewport height)

Why does the parent URL become the origin for an AJAX request coming from an iframe?