2

essa é parte do código HTML em questão:

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

Meu código Javascript

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);
                }
        }
});

O que acontece que é ele está excluindo os itens adicionado, porém não está excluindo na ordem, poderiam dá uma olhada por favor, acredito ser uma besteira.

2 Respostas 2

3

No ciclo for deves especificar que estás a percorrer de maneira a teres acesso ao indice correspondente, experimenta isto:

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

DOCS

2
  • desculpe, mas ainda não está funcionando, quando clico no X para remove, ele está removendo aleatoriamente.
    – user10264
    Commented 19/09/2017 às 18:54
  • Ele está removendo de cima para baixo independente em qual eu clicar.
    – user10264
    Commented 19/09/2017 às 18:56
2

Precisas de passar o indice para essa função, o e.preventDefault() não precisa de estar na função, podes fazer com o v-on:click.prevent.

Uma sugestão de código poderia ser assim:

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

e depois:

removeElement: function(index){
    this.elements = this.elements.filter((el, i) => i != index);
}
5
  • 1
    valeu, obrigado, funcionou.
    – user10264
    Commented 19/09/2017 às 19:02
  • Sergio desculpa, consegues explicar o porquê de no meu caso não funcionar sff, o preventDefault() não faz o esperado? Era capaz de jurar que funcionaria. Amanhã apago a resposta, agora não consigo porque estou na app
    – Miguel
    Commented 19/09/2017 às 19:53
  • @Miguel não :) O teu código é válido e funciona jsfiddle.net/Sergio_fiddle/ey349pot
    – Sergio
    Commented 19/09/2017 às 19:59
  • @Sergio é vdde, obgado pelo exemplo, mas fazes ideia porque é que o AP disse que não estava?
    – Miguel
    Commented 19/09/2017 às 20:05
  • 1
    @Miguel não. Sugiro perguntar.
    – Sergio
    Commented 19/09/2017 às 20:09

Você deve fazer log-in para responder a esta pergunta.