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从数组中删除项目？

2 个答案: