dericcain dericcain - 26 days ago 7
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

$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

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?