Question

在下面的简单示例中，我在页面加载的vue模型中调用我的云服务方法，其中包含一个特定于内部服务的生命周期事件afterSubmitContacts()，该事件在用户执行某些事件时执行。用户执行此活动后，会弹出警告框，其中显示undefined而不是myTest。

通过下面的示例，我的目标是成功访问vue模型方法和数据属性，而不是未定义。在下面的场景中访问vue模型数据和方法的正确方法是什么？

提前致谢！

            new Vue({
                el: '#vue-test',
                data: {
                    name: 'myTest',
                },
                template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
                methods: {
                    initCloudService(event) {
                        cloudservice.init({
                            afterSubmitContacts: function (contacts) {
                                alert(this.name); //undefined
                                ...
                    }
                },
                ready() {
                    this.initCloudService();
                }

Answer 1

您丢失了上下文，您的this引用了函数本身，而不是Vue实例。

您可以选择：

调用VueJS方法>

new Vue({
  el: '#vue-test',
    data: {
      name: 'myTest',
    },
    template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
    methods: {
      afterSubmitContacts(contacts) {
        alert(this.name);
        // ...
      },
      initCloudService(event) {
        cloudservice.init({afterSubmitContacts})
      }
    },
    ready() {
    this.initCloudService();
  }
}

改为使用箭头功能>

afterSubmitContacts: contacts => {
    alert(this.name);
    // ...
}

自我是一个丑陋的解决方案:)

Answer 2

这里的问题是afterSubmitContacts拥有常规功能。在执行时，它根据几个规则（further reading here）绑定this。

代码编写不完整（缺少一些闭包以及实际调用afterSubmitContacts的方式），所以我对你的代码采取了一些自由来传递这一点。

ES5解决方案

new Vue({
            el: '#vue-test',
            data: {
                name: 'myTest',
            },
            template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
            methods: {
                initCloudService(event) {
                    self=this;
                    cloudservice.init({
                        afterSubmitContacts: function (contacts) {
                            alert(self.name);
                        }
                    })
                }
            },
            ready() {
                this.initCloudService();
            }
        }

ES6解决方案

箭头功能不会更改this，因此您仍然可以正常使用它。

new Vue({
            el: '#vue-test',
            data: {
                name: 'myTest',
            },
            template: '<a href="#" class="button btn-lg btn-primary">Button</a>',
            methods: {
                initCloudService(event) {
                    cloudservice.init({
                        afterSubmitContacts: (contacts)=> {
                            alert(this.name);
                        }
                    })
                }
            },
            ready() {
                this.initCloudService();
            }
        }

以嵌套方法访问vue模型数据

2 个答案: