Apagar do lado do cliente usando axios

Bom dia! Não consigo enxergar nada de errado com seu código. Chuto que podem ser dois problemas:

a) Versão do Vue diferente que usei no curso com bug no change detection.

b) O axios não esta integrado com o Vue então, quando você altera a propriedade do componente através do callback do Axios, como ele não é integrado por padrão com o Vue, o framework não sabe que a propriedade foi alterada. Já o http (resource) internamente dispara o change detection quando a propriedade é alterada.

Você leu a documentação do axios para saber se é necessário alguma configuração especial?

Uma ideia que eu tive agora que talvez possa resolver é você não mutar sua lista (pode ser que o axios não seja esperto nisso). Faça assim:

this.resultados = this.resultado.filter(r => r.id !== resultado.id);

Veja que no código anterior não há mutação da lista, criamos uma nova referência, só que sem o item que você deseja remover.

Coloca um exemplo do seu json, acredito que sei qual o problema, mas preciso do seu json para executar aqui e testar.

Oi Rafael! Lendo novamente a dúvida do aluno, ele diz que a tela é atualizada, mas o que é removido é o item errado, então podem ignorar o problema de change detection que citei no eu post.

Fabiano, além do JSON que o Rafael pediu para você postar, coloque o código template que você usa a diretiva v-for.

{
email: 'email@email.com',
password: 'password',
id: '1'
},
{
email: 'email@email.com',
password: 'password',
id: '1'
},
{
email: 'email@email.com',
password: 'password',
id: '1'
},
{
email: 'email@email.com',
password: 'password',
id: '1'
},
{
email: 'email@email.com',
password: 'password',
id: '1'
}

<tbody>
                      <tr v-for="resultado in resultados">
                        <th scope="row">{{ resultado.id }}</th>
                        <td>{{ resultado.email }}</td>
                        <td><button class="btn btn-info"><i class="fa fa-pencil-square-o"></i> Editar</button> <button class="btn btn-danger" @click.prevent="apagar(resultado)"><i class="fa fa-ban"></i> Apagar</button></td>
                      </tr>
                    </tbody>

Do banco ele exclui o certo, mas da visulização ele tira o errado, ai quando atualizo a página ele volta com o outro que sumiu da visualização...

Mas ressalto que do banco ele remove perfeitamente! o problema ta ali no splice, só não sei o que pode ser em exato

Fiz um teste aqui, teste com esse codigo

<div id="app">
    <p v-for="(item, index) in resultado">
      {{item.id}}
      <button @click="apagar(item)">Apagar</button>
    </p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    resultado: [
      {
        email: 'email@email.com',
        password: 'password',
        id: '1'
      },
      {
        email: 'email@email.com',
        password: 'password',
        id: '2'
      },
      {
        email: 'email@email.com',
        password: 'password',
        id: '3'
      },
      {
        email: 'email@email.com',
        password: 'password',
        id: '4'
      },
      {
        email: 'email@email.com',
        password: 'password',
        id: '5'
      }
    ]
  },
  methods: {
    apagar(item){
      this.resultado.splice(this.resultado.indexOf(item), 1)
    }
  }
})

Aqui funcionou certo, basta apenas você adaptar para o seu, pois fiz o teste no JSBin, segue o link para testar.

https://jsbin.com/kuvaxujumo/edit?html,js,console,output

Show, Rafael! Era exatamente isso, deu certinho aqui, adaptei ao meu código e agora deleta do banco e do view certinho!

Mais uma vez, muito obrigado mesmo pela força!