Currently working on creating a sort function with Vue js
The goal is to initially display a list in ID order by default, and then allow sorting by clicking the asc/desc by name button.
Additionally, when the all button is clicked, the list should revert back to being sorted by ID order and add the class is-active.
I have successfully implemented the default sorting function, but I am struggling with integrating it with the ID number order.
If anyone has experience with this and can offer some guidance, it would be greatly appreciated.
Thank you
new Vue({
el: '#app',
data: {
allItem: true,
order: null,
list: [],
},
created: function () {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(function (response) {
this.list = response.data
}.bind(this)).catch(function (e) {
console.error(e)
})
},
methods: {
all: function() {
this.full = true //for button class 'is-active'... NOT WORKING ...
},
},
computed: {
sort: function() {
console.log(this.order);
return _.orderBy(this.list, 'name', this.order ? 'desc' : 'asc') //loadash
},
sorted: function() {
if (this.order || !this.order) { //sort by arc/desc
this.ordered = true //for button class 'is-active'... NOT WORKING ...
this.allItem = false //for button class 'is-active'... NOT WORKING ...
console.log(this.order);
return this.sort
} else if (this.order = null){ //defalut order by ID number ... NOT WORKING ...
this.ordered = false //for button class 'is-active'... NOT WORKING ...
console.log(this.full);
return this.list
}
},
}
})span {font-weight: bold;}
.is-active {background: turquoise;}<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9889180869aa9d9c7d8dec7d8">[email protected]</a>/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7cbc8c3c6d4cfe793899690899692">[email protected]</a>/lodash.min.js"></script>
<div id="app">
<ul>
<li v-for="item in sorted" :key="item.id">
<span>ID:</span> {{item.id}} , <span>Name:</span> {{item.name}} , <span>Company:</span> {{item.company.name}}
</li>
</ul>
<button :class="{'is-active': allItem}" @click="all">all</button>
<button :class="{'is-active': ordered}" @click="order=!order">asc/desc by name</button>
</div>