如何使用 faker 和 lodash 从数组中删除一个项目？

Question

我正在使用 faker.js 和 lodash 创建一个包含随机用户信息的数据表。我想用一个按钮删除一个用户。每个用户都有一个删除按钮。所以当用户按下删除按钮时，我希望删除该行。

当我第一次制作这个数据表时，我能够删除带有索引的用户。但后来我希望能够根据用户的名字和姓氏对用户进行排序。所以不得不改代码。所以现在当我按索引删除时，错误的被删除了。我一直在查看 lodash 文档，我想我可以使用 _remove 和/或 _filter 但不知道如何使用。

代码：

<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>

我要的是要删除的正确用户信息。提前致谢:)

Answer 1

首先，将 :key 放在 v-for 上以避免渲染优化错误。我认为这是你的主要问题。其实错误就在DOM处。您可以使用 Vue DevTools.

确认

然后，添加一个按钮来调用使用 uuid 的方法。如果需要，请使用 lodash.remove：

_.remove(array, function(n) {
  return n.uuid === uuid;
});

如果你使用 lodash，我认为你失去了阵列的反应性，所以重新设置阵列：

this.$set(this.$data, 'users', newuserarray);

Answer 2

我终于用下面的代码让它工作了。

tabortrad: function (vilketuuid) {
                this.users = _.filter(this.users, function(o) { return o.uuid !== vilketuuid; });
            },

而且我还在 v-for 上放了一个键。

如何使用 faker 和 lodash 从数组中删除一个项目？

How to remove an item from an array using faker and lodash?

javascript

faker

lodash

vue.js

vuejs2