Vue.js $ delete do not delete item after removal from database

Question

I am using Laravel and trying to learn Vue.js. I have a delete request that works correctly and removes an object from the database. The problem is that it is not removed from the DOM after a successful deletion. I use the $remove method and pass it the full object, so I know that I am missing something.

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

Here is my view on Laravel:

 <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 main.js :

 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 execute this.persons , you are still referencing the Vue component

edit: can try -

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

Thought, perhaps, since persons is a string initially, does Vue not tie reactive capabilities properly?

Answer 2

I think you need to use this.$set in your created method, if you do not, I am afraid that Vue will lose reactivity.

In your created method, you can 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 need to pass JSON data to my component data property. 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 reactive this.persons = JSON.parse(this.list); }, }; </script> 

Thanks to everyone for their input. I almost dropped Vue due to how long it fixed this error.