A custom component was created in Vue.js 2.0 to delete items using SweetAlert. Here is the code snippet:
export default {
props:['service', 'method', 'id'],
methods: {
destroy() {
swal({
title: 'Are you sure?',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete',
cancelButtonText: 'Cancel!',
confirmButtonColor: '#34495e',
cancelButtonColor: '#ff3860',
}).then (() => {
this.service[this.method](this.id)
.then(() => {
swal({
title: 'Deleted',
text: 'Successfully deleted',
type: 'success',
showConfirmButton: false,
timer: 2000
});
location.reload();
})
.catch(() => {
swal({
title: 'Error',
text: 'Do you have sufficient rights?',
type: 'error',
showConfirmButton: false,
timer: 2000
});
});
})
}
}
}
The issue lies with the following line of code:
this.service[this.method](this.id)
I am passing the props in this manner:
<destroy :service="Service" method="destroy" :id="relation.id"></destroy>
The destroy method within the service class is as follows:
destroy(id) {
return axios.delete('/relations/' + id);
}
In my vue debug bar, the destroy component appears like this:
https://i.sstatic.net/NSY6z.png
The error message displayed in my console is:
Uncaught (in promise) TypeError: Cannot read property 'then' of undefined
at eval (eval at ./node_modules/babel-loader/lib/index.js?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/shared/Destroy.vue (app.js?id=d89bceb…:319), <anonymous>:27:54)
at <anonymous>
Any suggestions on how to resolve this issue?