Javascript 用嵌套方法访问vue模型数据

在下面的简单示例中，我在页面加载时调用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();
                }

这里的问题是，afterSubmitContacts具有常规功能。在执行时，它会基于多个规则绑定此文件

代码编写得不完美一些闭包丢失了，以及afterSubmitContacts实际上是如何调用的，所以我对您的代码进行了一些修改，以通过这一点

ES5溶液

这里的问题是，afterSubmitContacts具有常规功能。在执行时，它会基于多个规则绑定此文件

代码编写得不完美一些闭包丢失了，以及afterSubmitContacts实际上是如何调用的，所以我对您的代码进行了一些修改，以通过这一点

ES5溶液

---

您丢失了上下文，这是指函数本身，而不是Vue实例

您可以选择：

调用VueJS方法> Self是一个丑陋的解决方案：

---

您丢失了上下文，这是指函数本身，而不是Vue实例

您可以选择：

调用VueJS方法> Self是一个丑陋的解决方案：

---

您可以对afterSubmitContacts（例如afterSubmitContacts:contact=>alertthis.name）使用箭头函数，或者在该函数之外提供对该函数预期值的引用，然后通过该函数引用Vue实例，例如var self=this；afterSubmitContacts:functioncontacts{alertself.name；}。显然，如果您有能力在项目中使用箭头函数，则首选前者。感谢Marty的帮助。你能把这条评论作为回答吗？第二个建议很有效。我希望第一个建议也能起作用，尽管我遇到了编译时错误。假设方法体不仅仅是一个警报，而且还有多个参数，您能给出一个简单的示例说明arrow函数示例如何工作吗？谢谢您您可以对afterSubmitContacts使用箭头函数，例如afterSubmitContacts:contact=>alertthis.name，或者在该函数之外提供对该函数预期值的引用，然后通过该函数引用Vue实例，例如var self=this；afterSubmitContacts:functioncontacts{alertself.name；}。显然，如果您有能力在项目中使用箭头函数，则首选前者。感谢Marty的帮助。你能把这条评论作为回答吗？第二个建议很有效。我希望第一个建议也能起作用，尽管我遇到了编译时错误。假设方法体不仅仅是一个警报，而且还有多个参数，您能给出一个简单的示例说明arrow函数示例如何工作吗？非常感谢。

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

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

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