Vue.js remove an item from an array.

When executing a function, the last element is always deleted.

var app = new Vue({ el: '#app', data:{ openForm: 1, newTodoText:'', nextTodoId: 0, infoUser:{ email:'', firstName:'', secondName:'', phone:'' }, nameGuest: 50, guests:[] }, methods:{ toogleShow(){ this.openForm = !this.openForm; }, addNewGuests: function () { this.guests.push({ id: this.nextTodoId++, nameG: this.newTodoText }) }, }, }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="container" id="app"> <div class="row" v-show="openForm"> <div class="col-6 offset-3"><br><br> <form class = "d-flex flex-column w-100"> <label> Email <br> <input type="email" v-model="infoUser.email" class = "w-100" > </label> <label> First name <br> <input type="text" v-model="infoUser.firstName" class = "w-100" > </label> <label> Second name <br> <input type="text" v-model="infoUser.secondName" class = "w-100" > </label> <label> Phone <br> <input type="phone" v-model="infoUser.phone" class = "w-100" > </label> <hr class = "w-100"> <div class="w-100"> Guest <button class="btn btn-primary" @click.prevent="addNewGuests" > + </button> </div> <template v-for="(n, index) in guests" > <div @dblclick="guests.splice(index, 1)" v-bind:key="guests.id" > Guest {{++index}} <br> <input type="text" class = "w-100" > </div> </template> <hr class="w-100"> <button class = "btn btn-success" @click.prevent="toogleShow" > Send form </button> </form> </div> </div> <div class="row" v-show="!openForm"> <div class="col-3 offset-3"> <table class="table table-borderd fluid"> <tr v-for="(value, key) in infoUser" > <td>{{key}}</td> <td>{{value}}</td> </tr> <!-- <tr> <td>guests</td> <td v-for="item in guests" > <td>{{item}}</td> </td> --> </tr> </table> </div> </div> </div>

    1 answer 1

     var app = new Vue({ el: '#app', data:{ openForm: 1, newTodoText:'', nextTodoId: 0, infoUser:{ email:'', firstName:'', secondName:'', phone:'' }, nameGuest: 50, guests:[] }, methods:{ toogleShow(){ this.openForm = !this.openForm; }, addNewGuests: function () { this.guests.push({ id: this.nextTodoId++, nameG: this.newTodoText, value: "", }) }, }, }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="container" id="app"> <div class="row" v-show="openForm"> <div class="col-6 offset-3"><br><br> <form class = "d-flex flex-column w-100"> <label> Email <br> <input type="email" v-model="infoUser.email" class = "w-100" > </label> <label> First name <br> <input type="text" v-model="infoUser.firstName" class = "w-100" > </label> <label> Second name <br> <input type="text" v-model="infoUser.secondName" class = "w-100" > </label> <label> Phone <br> <input type="phone" v-model="infoUser.phone" class = "w-100" > </label> <hr class = "w-100"> <div class="w-100"> Guest <button class="btn btn-primary" @click.prevent="addNewGuests" > + </button> </div> <div v-for="(n, index) in guests" @dblclick="guests.splice(index, 1)" v-bind:key="n.id" > Guest {{index+1}} <br> <input type="text" class = "w-100" v-model="n.value" > </div> <hr class="w-100"> <button class = "btn btn-success" @click.prevent="toogleShow" > Send form </button> </form> </div> </div> <div class="row" v-show="!openForm"> <div class="col-3 offset-3"> <table class="table table-borderd fluid"> <tr v-for="(value, key) in infoUser" > <td>{{key}}</td> <td>{{value}}</td> </tr> <!-- <tr> <td>guests</td> <td v-for="item in guests" > <td>{{item}}</td> </td> --> </tr> </table> </div> </div> </div>

    • Alas, I have already implemented the output of information in an array. The problem itself is to remove double koik on the node created by DOM, the splice function is responsible for it. That is the problem itself. - Dmitriy Zubkov
    • You generally, the code tested? On what grounds do you determine what is removed last? - Dmytryk
    • Well, add 5 elements for example, and double-click on it, deletes the last one, regardless of what you clicked :( I have already tested and done refocusing. It remains only to deal with removing the elements.: ((9 Do not bite. I just entered Vue - Dmitriy Zubkov
    • In other words, you look at the number next to the inscription Guest ..... However, this is just the array index, not the guest id ... this is how the output information logic is implemented ... however, I made sure that that guest was deleted On which there was a click - you can check it if you fill in all input - Dmytryk
    • Everything is all))) I have not tested. Alas, so far poorly figured out how it removes. My mistake is that I had a ++ index variable rewritten. When I wrote index + 1 as you have in the version, everything worked as it should. Thank you very much young man)) - dmitriy zubkov