dericcain dericcain - 1 year ago 212
Javascript Question

Vue.js $remove not removing element after deleted from database

I am using Laravel and trying to learn Vue.js. I have a delete request that is working properly and deleting the object from the database. The problem is that it is not being removed from the DOM after the successful deletion. I am using the

method and passing it the full object, so I know I'm missing something.

As a side note, I have a
as an entry point with a
as a component. The
holds the template and script for that template.

Here is my Laravel view:

<div id="app">
<person-table list="{{ $persons }}">


And here is my `PersonTable.vue:

<template id="persons-template">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Persons List</h1>
<table class="table table-hover table-striped">
<td>First Name</td>
<td>Last Name</td>
<tr v-for="person in list">
<td>{{person.first_name }}</td>
<td>{{person.last_name }}</td>
<td>{{ }}</td>
<td>{{person.gender }}</td>
<td><span @click="deletePerson(person)">X</span>

export default {

template: '#persons-template',

props: ['list'],

methods: {
deletePerson: function(person) {
this.$http.delete('/person/' +
function(response) {


created: function() {
this.persons = JSON.parse(this.list);


And my
entry point:

var Vue = require('vue');


var Token = document.querySelector('meta[name="_token"]').getAttribute('content');

Vue.http.headers.common['X-CSRF-TOKEN'] = Token;

import PersonTable from './components/PersonTable.vue';

new Vue({

el: '#app',

components: { PersonTable },


Answer Source

I think you need to bind this to the response function:

function(response) {

That way when you do this.persons you are still referring to the Vue component

edit: could try -

  return {
  this.persons = JSON.parse(this.personJson)

Thinking maybe since persons is a string initially, Vue isn't binding the reactive capabilities properly?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download