Javascript 组件中服务的Vue.js调用方法

我在删除的东西中做了一个组件。看起来是这样的：

export default {
    props:['service', 'method', 'id'],

    methods: {
        destroy() {
            swal({
                title: 'Weet u het zeker?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ja verwijder',
                cancelButtonText: 'Stop!',
                confirmButtonColor: '#34495e',
                cancelButtonColor: '#ff3860',
            }).then (() => {
                this.service[this.method](this.id)
                    .then(() => {
                        swal({
                            title: 'Verwijderd',
                            text: 'Succesvol verwijderd',
                            type: 'success',
                            showConfirmButton: false,
                            timer: 2000
                        });

                        location.reload();
                    })

                    .catch(() => {
                        swal({
                            title: 'Fout',
                            text: 'Heeft u voldoende rechten?',
                            type: 'error',
                            showConfirmButton: false,
                            timer: 2000
                        });
                    });
            })
        }
    }
}

<destroy :service="Service" method="destroy" :id="relation.id"></destroy>

destroy(id) {
    return axios.delete('/relaties/' + id);
}

问题在于：

this.service[this.method](this.id)

它不起作用。我正在传递这样的道具：

export default {
    props:['service', 'method', 'id'],

    methods: {
        destroy() {
            swal({
                title: 'Weet u het zeker?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ja verwijder',
                cancelButtonText: 'Stop!',
                confirmButtonColor: '#34495e',
                cancelButtonColor: '#ff3860',
            }).then (() => {
                this.service[this.method](this.id)
                    .then(() => {
                        swal({
                            title: 'Verwijderd',
                            text: 'Succesvol verwijderd',
                            type: 'success',
                            showConfirmButton: false,
                            timer: 2000
                        });

                        location.reload();
                    })

                    .catch(() => {
                        swal({
                            title: 'Fout',
                            text: 'Heeft u voldoende rechten?',
                            type: 'error',
                            showConfirmButton: false,
                            timer: 2000
                        });
                    });
            })
        }
    }
}

<destroy :service="Service" method="destroy" :id="relation.id"></destroy>

destroy(id) {
    return axios.delete('/relaties/' + id);
}

在我的vue调试栏中，销毁组件如下所示：

export default {
    props:['service', 'method', 'id'],

    methods: {
        destroy() {
            swal({
                title: 'Weet u het zeker?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ja verwijder',
                cancelButtonText: 'Stop!',
                confirmButtonColor: '#34495e',
                cancelButtonColor: '#ff3860',
            }).then (() => {
                this.service[this.method](this.id)
                    .then(() => {
                        swal({
                            title: 'Verwijderd',
                            text: 'Succesvol verwijderd',
                            type: 'success',
                            showConfirmButton: false,
                            timer: 2000
                        });

                        location.reload();
                    })

                    .catch(() => {
                        swal({
                            title: 'Fout',
                            text: 'Heeft u voldoende rechten?',
                            type: 'error',
                            showConfirmButton: false,
                            timer: 2000
                        });
                    });
            })
        }
    }
}

<destroy :service="Service" method="destroy" :id="relation.id"></destroy>

destroy(id) {
    return axios.delete('/relaties/' + id);
}

“我的控制台”中的错误：

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>

Uncaught（in promise）TypeError:无法读取未定义的属性“then”
在eval（eval at./node_modules/babel loader/lib/index.js？{“cacheDirectory”：true，“预设”：[[“env”，{“modules”：false，“目标”：{“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），：27:54）
在

你知道我该怎么解决这个问题吗

    export default {
        props:['service', 'method', 'id'],

        methods: {
            destroy() {
                var self = this;
                swal({
                    title: 'Weet u het zeker?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Ja verwijder',
                    cancelButtonText: 'Stop!',
                    confirmButtonColor: '#34495e',
                    cancelButtonColor: '#ff3860',
                }).then (() => {
                    self.service[self.method](self.id)
                        .then(() => {
                            swal({
                                title: 'Verwijderd',
                                text: 'Succesvol verwijderd',
                                type: 'success',
                                showConfirmButton: false,
                                timer: 2000
                            });

                            location.reload();
                        })

                        .catch(() => {
                            swal({
                                title: 'Fout',
                                text: 'Heeft u voldoende rechten?',
                                type: 'error',
                                showConfirmButton: false,
                                timer: 2000
                            });
                        });
                })
            }
        }
    }

您应该创建指向“this”变量的全局链接，在SWAL回调函数中，“this”被替换为本地SWAL变量

您应该创建指向“this”变量的全局链接，在SWAL回调函数中，“this”被替换为本地SWAL变量