How to track descending/ascending sort state in vue js?

Question

Vue.js

Please tell me how to properly track the sort state, i.e. with each subsequent click on th, the data was sorted in reverse order, the code:

<tempate>
<table>
...
<th @click="sorted({ sortedBy: 'id', type: 'integer'}, $event)">Id</th>
<th @click="sorted({ sortedBy: 'title', type: 'string'}, $event)">title</th>
<th @click="sorted({ sortedBy: 'name', type: 'string'}, $event)">name</th>
...
</table>
</tempate>

<script>
...
data: {
    list: [
        {id, title, name},
        ...
    ]
},
methods: {
    sorted({sortedBy, type}, e) {
    }
}
...
</script>

Answer 1

Add a boolean property to the component that will indicate the sort order, and toggle its value when calling the sorted method. For example .