Attempting to get a table to sort with VUE

Question

I am currently working on adding the sort functionality to a table built with vue, I am not sure what I am missing, as my code gets the descending arrow but does not actually sort the column. I have added the table and the vue code for the table. Any help would be greatly appreciated.

HTML table

<v-simple-table>
                        <template v-slot:default>

                            <thead>
                                <tr>
                                    <th class="text-center" @click="sort('name')">
                                        <div>Batch ID</div>
                                        <v-icon small v-if="sortBy === 'name'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('strain')">
                                        <div>Strain</div>
                                        <v-icon small v-if="sortBy === 'strain'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('type')">
                                        <div>Type</div>
                                        <v-icon small v-if="sortBy === 'type'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('trim')">
                                        <div>Trim</div>
                                        <v-icon small v-if="sortBy === 'trim'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                    <th class="text-center" @click="sort('history')">
                                        <div>History</div>
                                        <v-icon small v-if="sortBy === 'history'">{{descending ? 'fas fa-caret-down' : 'fas fa-caret-up'}}</v-icon>
                                    </th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr v-for="item of filteredReports" :key="item.id">
                                    <td class="text-center">{{item.name}}</td>
                                    <td class="text-center">{{item.strain ? item.strain.name : '-'}}</td>
                                    <td class="text-center">{{item.type.name}}</td>
                                    <td class="text-center">
                                        <phase-chip
                                            :report="item.trim"
                                            type="trim"
                                        ></phase-chip>
                                    </td>
                                    <td class="text-center">
                                        <v-btn icon color="primary" small :to="`/batches/${item.batch}/history`" target="_blank">
                                            <v-icon>fas fa-external-link-square-alt</v-icon>
                                        </v-btn>
                                    </td>
                                </tr>
                            </tbody>

                        </template>
                    </v-simple-table>

JS

methods : {
        sort(field) {
            if (this.sortBy === field) this.descending = !this.descending
            else {
            this.descending = true
            this.sortBy = field
            }
        }
    },

computed: {
        sortedReports () {
            return [...this.filteredReports].sort((a,b) => {
                if (a[this.sortBy] < b[this.sortBy]) return this.descending ? 1 : -1
                else if (a[this.sortBy] > b[this.sortBy]) return this.descending ? -1 : 1
                else return 0 
            })
        }
    }

Is sortedReports already sorted in ascending and you just want to be able to toggle between descending and ascending? — nbixler
– nbixler, Commented Jun 22, 2020 at 17:59

nbixler · Accepted Answer · 2020-06-22 18:05:23Z

1

Since it's already sorted, I'd just use a computed property with javascript reverse()

(Then the down arrow just becomes a button that switches which list you're using to generate the table)

See more: https://www.javatpoint.com/javascript-array-reverse-method#:~:text=The%20JavaScript%20array%20reverse(),changes%20in%20the%20original%20array.

answered Jun 22, 2020 at 18:05

nbixler

5721 gold badge9 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Attempting to get a table to sort with VUE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related