I need help with implementing a Custom Sort method on my divs to arrange them in ascending or descending order. My query is how can I pre-set the icon color to grey by default, and only change it to black when clicked, while keeping the others greyed out as demonstrated in Vuetify data tables here.
For reference, here is a link to my pen.
new Vue({
el: '#app',
data() {
return {
headers: [{
text: "Name",
value: "name"
},
{
text: "Grades",
value: "grades"
}
],
labels: ["Andy", "Max", "John", "Travis", "Rick"],
Grades: [99, 72, 66, 84, 91],
sortKey: "",
direction: 1
}
},
computed: {
tableItems() {
let retVal = this.labels.map((label, i) => {
return {
name: label,
grades: this.Grades[i]
};
});
if (this.sortKey) {
retVal.sort((a, b) =>
this.direction *
(a[this.sortKey] < b[this.sortKey] ? -1 : 1)
);
}
return retVal;
}
},
methods: {
sortBy(prop) {
if (this.sortKey === prop) {
this.direction *= -1
}
this.sortKey = prop;
console.log(prop);
}
}
})<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44323121302d223d04756a716a7570">[email protected]</a>/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9fe9eafaebf6f9e6dfaeb1aab1aeab">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout>
<v-flex v-for="header in headers" :key="header.text" xs4 py-1>
<span>
{{ header.text }}
<v-icon small @click="sortBy(header.value)">arrow_upward</v-icon>
</span>
</v-layout>
<v-layout v-for="item in tableItems" :key="item.name">
<v-flex xs4 py-1>
<span>{{ item.name }}</span>
</v-flex>
<v-flex xs4 py-1>
<span>{{item.grades}}</span>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>I am trying to replicate the functionality of Vuetify data tables but struggling with binding the color of the icon based on the header value when clicked.