Is there a way to sort by the content inside an input box in vuejs? - vue.js

Question

I am making a data table where I shall show diffrent users information. I want to be able to sort for an example all the users by their firstname or lastname. I have used inputboxes becuse I also want to be able to edit the users information.
I have tried diffrent scripts from here on stackoverflow and other sites. But to no sucess. tried template and even copied straight off a working code but with out inputboxes then. I am also very new to Vue js only worked with it for 4 days.
<div id="app">
<table class="table">
<thead>
<tr>
<!--Rubriker för tabellkolummer-->
<th>ID</th>
<th>Förnamn</th>
<th>Efternamn</th>
<th>Telefonnummer</th>
<th>E-postadress</th>
<th>Behörighet</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in users">
<template v-if="user && user.editable">
<td><input type="text" v-model="user.uuid" class="input" disabled></td>
<td><input type="text" v-model="user.firstName" class="input"></td>
<td><input type="text" v-model="user.lastName" class="input"></td>
<td><input type="text" v-model="user.phone" class="input"></td>
<td><input type="text" v-model="user.email" class="input"></td>
<td><input type="text" v-model="user.jobTitle" class="input"></td>
<td><button class="button" #click="onUserClick(index)">Spara</button>
<button class="button" #click="tabortrad(index)">Ta bort rad</button></td>
</template>
<template v-else>
<td><input type="text" v-model="user.uuid" class="input" disabled></td>
<td><input type="text" v-model="user.firstName" class="input" disabled></td>
<td><input type="text" v-model="user.lastName" class="input" disabled></td>
<td><input type="text" v-model="user.phone" class="input" disabled></td>
<td><input type="text" v-model="user.email" class="input" disabled></td>
<td><input type="text" v-model="user.jobTitle" class="input" disabled></td>
<td><button class="button" #click="onUserClick(index)">Redigera</button>
<button class="button" #click="tabortrad(index)">Ta bort rad</button></td>
</template>
</tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th><button class="button is-pulled-right" #click='laggtillrad(users)'>Lägg till en rad</button></th>
</tbody>
</table>
</div>
<script>
faker.locale = "sv";
//Skapar slumpmässiga användardata
let randomusers = [];
for (i = 0; i < 4; i++) {
let uuid = faker.random.uuid();
let firstName = faker.name.firstName();
let lastName = faker.name.lastName();
let phone = faker.phone.phoneNumber();
let email = faker.internet.email();
let jobTitle = faker.name.jobTitle();
randomusers.push({ 'uuid': uuid, 'firstName': firstName, 'lastName': lastName, 'phone': phone, 'email': email, 'jobTitle': jobTitle });
}
new Vue({
el: '#app',
data: {
users: randomusers,
},
methods: {
//Lägger till en rad längst ner i tabellen
laggtillrad: function (event) {
var nyrad = {
uuid: faker.random.uuid(),
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
phone: faker.phone.phoneNumber(),
email: faker.internet.email(),
jobTitle: faker.name.jobTitle(),
};
this.users.push(nyrad)
},
//Tar bort raden där användaren trycker på "Ta bort" knappen
tabortrad: function (index) {
this.users.splice(index, 1);
},
//Redigerar raden där användaren trycker på "Redigera" knappen och ersätts med en spara knapp
onUserClick(index) {
const changeUser = this.users[index];
changeUser.editable = !changeUser.editable;
this.$set(this.users, index, changeUser);
}
},
})
</script>
I just want to be able to sort the users information. But think I must start all over again an use something called grid I think. But if someone can help me I will be very happy and maybe some off this code I have can come to use for someone else :).

Answer 1

Just add sortedUsers computed property that returns the sorted copy of users array and use it this way:
<tr v-for="(user,index) in sortedUsers"> and
computed: {
sortedUsers() {
// Using destructuring to prevent users array in-place mutation
return [...this.users].sort((userA, userB) => userA.firstName.localeCompare(userB.firstName))