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

Question

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 $remove method and passing it the full object, so I know I'm missing something.

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

Here is my Laravel view:

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

    </person-table>
</div>

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">
                    <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>Email</td>
                        <td>Gender</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="person in list">
                        <td>{{person.first_name }}</td>
                        <td>{{person.last_name }}</td>
                        <td>{{person.email }}</td>
                        <td>{{person.gender }}</td>
                        <td><span @click="deletePerson(person)">X</span>
                    </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</template>

<script>
export default {

    template: '#persons-template',

    props: ['list'],

    methods: {
        deletePerson: function(person) {
            this.$http.delete('/person/' + person.id).then(
                function(response) {
                    this.persons.$remove(person);
                }
            );
        }

    },

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

};
</script>

And my main.js entry point:

var Vue = require('vue');

Vue.use(require('vue-resource'));

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 1

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

function(response) {
    this.persons.$remove(person);
}.bind(this)

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

edit: could try -

props:['personJson'],
data:function(){
  return {
    persons:[]
  }
},
ready:function(){
  this.persons = JSON.parse(this.personJson)
}

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

Answer 2

I think that you need to use the this.$set in your created method, if you don't, I am afraid that Vue would lose reactivity.

In your created method, could you try the following:

export default {

    template: '#persons-template',

    props: ['persons'],

    methods: {
        deletePerson: function(person) {
            var self = this;
            this.$http.delete('/person/' + person).then(
                function(response) {
                    self.persons.$remove(person);
                }
            );
        }

    },

    created: function() {
        this.$set('persons',JSON.parse(this.persons));
    }

};

Answer 3

Finally figured it out. I needed to pass the JSON data to my data property of the component. Here is the code.

In the blade file:

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

    </person-table>
</div>

In my PersonTable.vue file:

<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">
                    <thead>
                    <tr>
                        <td>First Name</td>
                        <td>Last Name</td>
                        <td>Email</td>
                        <td>Gender</td>
                    </tr>
                    </thead>
                    <tbody>
                    // Notice how I am using persons here instead of list
                    <tr v-for="person in persons">
                        <td>{{person.first_name }}</td>
                        <td>{{person.last_name }}</td>
                        <td>{{person.email }}</td>
                        <td>{{person.gender }}</td>
                        <td><span class="delete person" @click="deletePerson(person)"><i class="fa fa-close"></i></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {

        template: '#persons-template',

        props: ['list'],

        data: function() {
            return {
                persons: []
            }
        },

        methods: {
            deletePerson: function(person) {
                this.$http.delete('/person/' + person.id).then(
                    function(response) {
                        this.persons.$remove(person);
                     }
                );
            },
        },

        created: function() {
            // Pushing the data to the data property so it's reactive
            this.persons = JSON.parse(this.list);
        },

    };
</script>

Thanks to everyone for their contributions. I almost ditched Vue because of how long it has taken to fix this error.