How to remove an item from an array using faker and lodash?
Question
I'm making a datatable with random user information using faker.js and lodash. I want to remove a user with a button. Every user has a remove button. So I when a user press the remove button I want that row to be removed.
When I first made this datatable I was able to remove the user with index. But then I wanted to be able to sort the users with their firstname and lastname. So had to change the code. So now when I removed by index the wrong one got removed. I have been looking on lodash documentation and I think I can use _remove and or _filter but don't know how.
The Code:
<body>
<div id="app">
<p></p>
<table class="table">
<thead>
<tr>
<!--Rubriker för tabellkolummer-->
<th>ID</th>
<th><a @click="deffinerasortering('firstName')" class="button">Förnamn</a></th>
<th><a @click="deffinerasortering('lastName')" class="button">Efternamn</a></th>
<th>Telefonnummer</th>
<th>E-postadress</th>
<th>Behörighet</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in sortedUsers">
<template v-if="user.uuid==edituuid">
<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="uppdaterapost(user.uuid)">Spara</button>
<button class="button" @click="tabortrad(user.uuid)">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="redigerapost(user.uuid)">Redigera</button>
<button class="button" @click="tabortrad(user.uuid)">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().substring(0, 5);
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,
sortkey: 'firstName',
sortorder: 'asc',
edituuid: ''
},
methods: {
//Uppdaterar redigering av posten
uppdaterapost: function (vilketuuid) {
this.edituuid = '';
},
//Redigerar raden där användaren trycker på "Redigera" knappen och ersätts med en spara knapp
redigerapost: function (vilketuuid) {
this.edituuid = vilketuuid;
},
//Deffinerar sortering
deffinerasortering: function (vilkensortering) {
if (this.sortkey == vilkensortering) {
if (this.sortorder == 'asc') {
this.sortorder = 'desc'//Skriv så att det visas en pil/upp när man sorterar
}
else {
this.sortorder = 'asc'
}
}
this.sortkey = vilkensortering;
},
//Lägger till en rad längst ner i tabellen
laggtillrad: function (event) {
var nyrad = {
uuid: faker.random.uuid().substring(0, 5),
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 (vilketuuid) {
console.log();
},
},
computed: {
sortedUsers() {
// Sorterar efter vad som finns i sortkey och med sorteringsordningen som finns i sortorder
return _.orderBy(this.users, [this.sortkey], [this.sortorder]);
}
}
})
</script>
</body>
What I want is the correct user information to be removed. Thanks in advance :)
2 answers
solution1
2 2019-08-29 08:08:56
First, put :key on the your v-for to avoid rendering optimisation errors. I think this is your main issue. In fact, the error is just in the DOM. You can confirm that with Vue DevTools .
Then, add a button to call a method that uses uuid . Use lodash.remove if you want:
_.remove(array, function(n) {
return n.uuid === uuid;
});
If you use lodash , I think you lose the reactivity on the array, so re-set the array with:
this.$set(this.$data, 'users', newuserarray);
solution2
0 ACCPTED 2019-09-02 08:51:40
I finally got it to work by using the following code.
tabortrad: function (vilketuuid) {
this.users = _.filter(this.users, function(o) { return o.uuid !== vilketuuid; });
},
and I have also put a key on the v-for.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.