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

Question

我在Vue.js 2.0中创建了一个使用sweetalert删除内容的组件。它看起来像这样：

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
                        });
                    });
            })
        }
    }
}

问题在于：

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

不工作。我正在传递这样的道具：

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

服务类中的destroy方法如下所示：

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

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

我的控制台出错：

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>

我知道如何解决这个问题吗？

Answer 1

{{1}}

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