List creation problem in Vue.js

Question

is part of the HTML code in question:

<div class="row">
        <h1>Minha lista de elementos</h1>
        <input type="text" class="form-control" v-model="newElement" v-on:keyup.enter="addElement">
        <ul>
            <li v-for="element in elements">
                {{ element.title }}
                <a href="#" v-on:click="removeElement($event,$index)">X</a>
            </li>

        </ul>
    </div>

My Javascript code

var hello = new Vue({
    el:'#hello',
    data:{
                msg: "Hello pessoal",
                peoples:[
                    {name: "Maria"},
                    {name: "Gustavo"},
                    {name: "Ricardo"},
                    {name: "Wladimir"}
                ],
                newElement:'',
                elements:[]
            },
            methods:{
                addElement: function(){
                /*  console.log(e); */
                var title = this.newElement.trim();
                    if(title){
                        this.elements.push({title:title});
                        this.newElement = "";   
                    } 
                },
                removeElement: function(e,index){
                    e.preventDefault();
                    this.elements.splice(index,1);
                }
        }
});

What happens is that it is deleting the added items, however it is not deleting in the order, could take a look please, I believe it is bullshit.

Answer 1

In the for cycle you must specify that you are traversing in order to have access to the corresponding Dice, try this:

<li v-for="(element, index) in elements">
    {{ element.title }}
    <a href="#" v-on:click="removeElement($event,index)">X</a>
</li>

DOCS

Answer 2

You need to pass the index to that function, the e.preventDefault() does not need to be in the function, you can do with the v-on:click.prevent.

A suggested code could be like this:

<li v-for="(element, i) in elements">
   {{ element.title }}
   <a href="#" v-on:click.prevent="removeElement(i)">X</a>
</li>

and then:

removeElement: function(index){
    this.elements = this.elements.filter((el, i) => i != index);
}